【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )
文章目录
- 一、FloatingActionButton 悬浮按钮组件
- 二、RefreshIndicator 组件
- 三、 相关资源
一、FloatingActionButton 悬浮按钮组件
FloatingActionButton 组件是悬浮按钮组件 ;
FloatingActionButton 组件常用设置 :
- 点击事件 : onPressed ;
- 显示组件 : child ;
FloatingActionButton 构造函数源码 : 在构造函数的可选参数中 , 可以查询该组件可设置的参数选项 ;
class FloatingActionButton extends StatelessWidget {/// Creates a circular floating action button.////// The [mini] and [clipBehavior] arguments must not be null. Additionally,/// [elevation], [highlightElevation], and [disabledElevation] (if specified)/// must be non-negative.const FloatingActionButton({Key key,this.child,// 显示组件 this.tooltip,this.foregroundColor,this.backgroundColor,this.focusColor,this.hoverColor,this.splashColor,this.heroTag = const _DefaultHeroTag(),this.elevation,this.focusElevation,this.hoverElevation,this.highlightElevation,this.disabledElevation,@required this.onPressed, // 点击事件this.mini = false,this.shape,this.clipBehavior = Clip.none,this.focusNode,this.autofocus = false,this.materialTapTargetSize,this.isExtended = false,}) : assert(elevation == null || elevation >= 0.0),assert(focusElevation == null || focusElevation >= 0.0),assert(hoverElevation == null || hoverElevation >= 0.0),assert(highlightElevation == null || highlightElevation >= 0.0),assert(disabledElevation == null || disabledElevation >= 0.0),assert(mini != null),assert(clipBehavior != null),assert(isExtended != null),assert(autofocus != null),_sizeConstraints = mini ? _kMiniSizeConstraints : _kSizeConstraints,super(key: key);
}
将 FloatingActionButton 悬浮按钮组件设置给 Scaffold 组件的 floatingActionButton 字段 ;
onPressed 字段设置点击事件 , child 设置显示组件 ;
Scaffold(// 设置悬浮按钮floatingActionButton: FloatingActionButton(onPressed: (){print("悬浮按钮点击");},child: Text("悬浮按钮组件"),),
)
完整代码示例 :
import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('StatefulWidgetPage 组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},// 条目items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// 设置悬浮按钮floatingActionButton: FloatingActionButton(onPressed: (){print("悬浮按钮点击");},child: Text("悬浮按钮组件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?Container( // 对应底部导航栏主界面选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡")],),):Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("设置页面选项卡")],),) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符),);}
}
运行效果 :
打印结果 : 点击悬浮按钮后打印如下内容 ;
I/flutter (23329): 悬浮按钮点击
二、RefreshIndicator 组件
RefreshIndicator 组件常用于下拉刷新操作 ;
RefreshIndicator 组件构造函数 : 构造函数的可选参数中展示了其可以设置的参数 ;
class RefreshIndicator extends StatefulWidget {/// Creates a refresh indicator.////// The [onRefresh], [child], and [notificationPredicate] arguments must be/// non-null. The default/// [displacement] is 40.0 logical pixels.////// The [semanticsLabel] is used to specify an accessibility label for this widget./// If it is null, it will be defaulted to [MaterialLocalizations.refreshIndicatorSemanticLabel]./// An empty string may be passed to avoid having anything read by screen reading software./// The [semanticsValue] may be used to specify progress on the widget.const RefreshIndicator({Key key,@required this.child, // 显示的主内容 , 一般是列表this.displacement = 40.0,@required this.onRefresh, // 刷新回调事件this.color,this.backgroundColor,this.notificationPredicate = defaultScrollNotificationPredicate,this.semanticsLabel,this.semanticsValue,}) : assert(child != null),assert(onRefresh != null),assert(notificationPredicate != null),super(key: key);
}
其 onFresh 字段的类型是 RefreshCallback 类型的 ,
/// A function that's called when the user has dragged the refresh indicator/// far enough to demonstrate that they want the app to refresh. The returned/// [Future] must complete when the refresh operation is finished.final RefreshCallback onRefresh;
RefreshCallback 类型就是 Future Function() 类型 ;
/// The signature for a function that's called when the user has dragged a
/// [RefreshIndicator] far enough to demonstrate that they want the app to
/// refresh. The returned [Future] must complete when the refresh operation is
/// finished.
///
/// Used by [RefreshIndicator.onRefresh].
typedef RefreshCallback = Future<void> Function();
这里定义一个 RefreshCallback 类型方法 , 该方法是一个异步方法 , 当 RefreshIndicator 发生下拉操作时, 回调该方法 ;
异步方法 , 在方法体前添加 async 关键字 ;
该方法的主要作用是暂停 500 ms , 然后返回空 ;
/// RefreshIndicator 发生下拉操作时, 回调该方法/// 该方啊是一个异步方法 , 在方法体前添加 async 关键字Future<Null> _refreshIndicatorOnRefresh() async{// 暂停 500 ms , 使用 await 关键字实现// 在这 500 ms 之间 , 列表处于刷新状态// 500 ms 之后 , 列表变为非刷新状态await Future.delayed(Duration(milliseconds: 500));return null;}
刷新指示器代码示例 : 首先设置其显示内容 , 在 child 字段设置 , 这里设置了一个 ListView 列表组件 , 然后设置了下拉刷新回调方法 , 在 onRefresh 字段设置 ;
// 刷新指示器组件RefreshIndicator(// 显示的内容child: ListView(children: <Widget>[Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡, 下拉刷新")],),),],),// 刷新时回调的方法// 列表发生下拉操作时, 回调该方法// 该回调是 Future 类型的onRefresh: _refreshIndicatorOnRefresh,)
完整代码示例 :
import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('StatefulWidgetPage 组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},// 条目items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// 设置悬浮按钮floatingActionButton: FloatingActionButton(onPressed: (){print("悬浮按钮点击");},child: Text("悬浮按钮组件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器组件RefreshIndicator(// 显示的内容child: ListView(children: <Widget>[Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡, 下拉刷新")],),),],),// 刷新时回调的方法// 列表发生下拉操作时, 回调该方法// 该回调是 Future 类型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("设置页面选项卡")],),) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符),);}/// RefreshIndicator 发生下拉操作时, 回调该方法/// 该方啊是一个异步方法 , 在方法体前添加 async 关键字Future<Null> _refreshIndicatorOnRefresh() async{// 暂停 500 ms , 使用 await 关键字实现// 在这 500 ms 之间 , 列表处于刷新状态// 500 ms 之后 , 列表变为非刷新状态await Future.delayed(Duration(milliseconds: 500));return null;}}
运行效果展示 :
三、 相关资源
参考资料 :
- Flutter 官网 : https://flutter.dev/
- Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社区 : https://flutter.cn/
- Flutter 实用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文档 : https://dart.cn/
- Dart 开发者官网 : https://api.dart.dev/
- Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
博客源码下载 :
GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )相关推荐
- 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...
- Flutter 中的常见的按钮组件 以及自 定义按钮组件、FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮
文章目录 一. Flutter 中的按钮组件介绍 二. Flutter 按钮组件中的一些属性 三. Flutter FloatingActionButton 介绍 四. FloatingActionB ...
- 开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
- 【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )
文章目录 前言 一.移除顶部状态栏空白 二.帧布局组件 三.透明度组件 四.监听滚动事件 五.完整代码示例 六.相关资源 前言 在上一篇博客 [Flutter]Banner 轮播组件 ( flutte ...
- 【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入 一.创建动画控制器 二.创建动画 三.创建动画作用的组件 四.创建 AnimatedBuilder 关联动画与组件 五.动画运行 六.完整代码示例 ...
- Flutter中的多选按钮组件Checkbox
Flutter 中的多选按钮组件有两种. 1. Checkbox 多选按钮,一般用来表现一些简单的信息. 常用属性如下: 1. value 多选的值: 2. onChanged 选择改变触发的事件: ...
- 在Flutter项目中开发IOS桌面组件(WidgetExtension)
在Flutter项目中开发IOS桌面组件(WidgetExtension) 具体的WidgetExtension的开发流程这里就不细说了,可以参考文末的链接. 在Flutter项目开发IOSWidge ...
- 如何在你的 Flutter 中使用 input chip 标签组件
lang: zh-CN title: 如何在你的 Flutter 中使用 input chip 标签组件 description: 译文 如何在你的 Flutter 中使用 input chip 标签 ...
- Flutter中AspectRatio、Card 卡片组件
1. AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高 ...
最新文章
- 6. H.264/AVC编码器原理
- AtCoder Beginner Contest 203(Sponsored by Panasonic)题解
- 一步步构建大型网站架构 [转]
- python调用cmd命令释放端口_Python——cmd调用(os.system阻塞处理)(多条命令执行)...
- 设置为自动获得IP地址,如何查看当前的IP地址
- mysql插入图片_如何向MySQL中插入图片文件
- opendir readdir
- Netty:原理架构解析
- 颜色的原理,三基色原理以及HLS(色相、亮度、饱和度)原理
- (Mac) Mac上如何修改本地的hostname
- Android Retrofit Put请求
- Android 实现搜索历史(1)
- lwip --- (十六)TCP建立流程
- java中arSigal_基于AR模型谱估计算法(Yule-Walker方法与Burg方法)的C++实现
- FISCO-BCOS 及 WeBase 问题记录
- 西门子S7-300 PLC 的50个经典问题
- python豆瓣电影爬虫
- 在甲骨文云容器实例(Container Instances)上部署firefox
- 高考数学复习-立体几何知识点总结及复习资料
- chaos_calmer尝鲜