【Flutter】StatefulWidget 组件 ( PageView 组件 )
2024-05-06 07:46:07
文章目录
- 一、PageView 组件
- 二、PageView 组件完整代码示例
- 三、 相关资源
一、PageView 组件
PageView 组件构造函数 : 构造函数中的可选参数就是 PageView 组件的所有可设置选项 ;
class PageView extends StatefulWidget {PageView({Key key,this.scrollDirection = Axis.horizontal,this.reverse = false,PageController controller,this.physics,this.pageSnapping = true,this.onPageChanged,List<Widget> children = const <Widget>[],this.dragStartBehavior = DragStartBehavior.start,this.allowImplicitScrolling = false,this.restorationId,this.clipBehavior = Clip.hardEdge,}) : assert(allowImplicitScrolling != null),assert(clipBehavior != null),controller = controller ?? _defaultPageController,childrenDelegate = SliverChildListDelegate(children),super(key: key);
}
PageView 组件 children 设置 : children 字段设置其要滑动切换的各个页面组件 ; 一般使用 Container 封装复杂的组件 ;
代码示例 : 下面的代码就是 PageView 中设置了三个滑动切换的组件 , 都是 Container 组件 , 每个 Container 都设置的居中方式 , 装饰器 , 显示的子组件 Text ;
// 设置一个布局容器 , 用于封装 PageView 组件Container(// 设置高度height: 200,// 设置边距margin: EdgeInsets.only(top: 10),// 设置装饰, 背景深橙色decoration: BoxDecoration(color: Colors.deepOrange),// 设置子组件 PageViewchild: PageView(// 设置 PageView 中封装的若干组件children: <Widget>[// 第一个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.green),// 显示的主要文字child: Text("页面 0", style: TextStyle(fontSize: 20, color: Colors.black),),),// 第二个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.red),// 显示的主要文字child: Text("页面 1", style: TextStyle(fontSize: 20, color: Colors.white),),),// 第三个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.black),// 显示的主要文字child: Text("页面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),),],),),
二、PageView 组件完整代码示例
完整代码示例 :
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("主页面选项卡, 下拉刷新"),// 图片组件 , 从网络中加载一张图片Image.network(// 图片地址"https://img-blog.csdnimg.cn/20210228180808133.png",// 图片宽度width: 200,// 图片高度height: 200,),// 输入框组件TextField(// 设置输入框样式decoration: InputDecoration(// 设置内容边距, 左右边距为 10, 上下边距为 0contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),// 设置的提示文案信息hintText: "提示信息",// 设置提示文案样式hintStyle: TextStyle(fontSize: 20, color: Colors.grey),),),// 设置一个布局容器 , 用于封装 PageView 组件Container(// 设置高度height: 200,// 设置边距margin: EdgeInsets.only(top: 10),// 设置装饰, 背景深橙色decoration: BoxDecoration(color: Colors.deepOrange),// 设置子组件 PageViewchild: PageView(// 设置 PageView 中封装的若干组件children: <Widget>[// 第一个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.green),// 显示的主要文字child: Text("页面 0", style: TextStyle(fontSize: 20, color: Colors.black),),),// 第二个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.red),// 显示的主要文字child: Text("页面 1", style: TextStyle(fontSize: 20, color: Colors.white),),),// 第三个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.black),// 显示的主要文字child: Text("页面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),),],),),],),),],),// 刷新时回调的方法// 列表发生下拉操作时, 回调该方法// 该回调是 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/15500147 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】StatefulWidget 组件 ( PageView 组件 )相关推荐
- 【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )
文章目录 一.Drawer 组件 二.PageView 组件 三.完整代码示例 四.相关资源 一.Drawer 组件 Scaffold 组件中的 drawer 参数 , 就是设置侧拉导航栏菜单的 , ...
- 【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )
文章目录 一.StatefulWidget 组件 二.创建 StatefulWidget 组件 三.MaterialApp 组件 四.Scaffold 组件 五. 相关资源 一.StatefulWid ...
- 【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
文章目录 一.Image 组件 二.TextField 组件 三. 相关资源 一.Image 组件 Image 组件有多个命名构造函数 , 可以从 文件 / 内存 / 网络 / Assets 中加载文 ...
- 【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )
文章目录 一.FloatingActionButton 悬浮按钮组件 二.RefreshIndicator 组件 三. 相关资源 一.FloatingActionButton 悬浮按钮组件 Float ...
- 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...
- 【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
文章目录 一.Wrap 组件 二.Expanded 组件 三.完整代码示例 四.相关资源 一.Wrap 组件 Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是 ...
- 【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
文章目录 一.FractionallySizedBox 组件 二.Stack 布局组件 三.Positioned 组件 四. 完整代码示例 五. 相关资源 一.FractionallySizedBox ...
- 【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
文章目录 一.PhysicalModel 组件 二. 完整代码示例 三. 相关资源 一.PhysicalModel 组件 PhysicalModel 组件 : 可以将布局显示成不同的形状 , clas ...
- 【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )
文章目录 前言 一.移除顶部状态栏空白 二.帧布局组件 三.透明度组件 四.监听滚动事件 五.完整代码示例 六.相关资源 前言 在上一篇博客 [Flutter]Banner 轮播组件 ( flutte ...
最新文章
- js表单验证,如果不为空时自动改变提交按钮的背景色
- 第四范式程晓澄：机器学习如何优化推荐系统
- UI组件之ImageView及其子类（一）ImageView显示图片
- kafka安装及Kafka-PHP扩展的使用
- android开发将h5转换成pdf_一键将PDF转换成PPT，秒懂！
- 卷积神经网络学习指南_卷积神经网络的直观指南
- 使用HTML5技术控制电脑或手机上的摄像头（转载）
- 为什么线程池里的方法会执行两次_别以为线程池很简单，来回答下这些问题！...
- python 爬取了租房数据
- 计算机操作系统操作系统（第四版）汤小丹版 思维导图（第一章到第七章）
- 安装window10出错：选中的磁盘具有 MBR 分区表。在 EFI 系统上，Windows只能安装到GPT磁盘。
- 简单小方法教你如何快速提高记忆力
- 到底什么叫作数据集成？
- charles mac端代理设置方法（含https）
- 如何利用小程序进行营销？
- [转] linux操作系统下c语言编程入门
- jdk8 list 反转_反转人生 莫锋颜月荷六朝金粉
- 2008-2020上市公司全要素生产率OP方法-文献-数据-Stata代码
- Scipy.integrate(scipy积分部分中文文档翻译，进度70%)
- 使用xCAT安装部署Linux以及Windows操作系统