Flutter从入门到实战
一共分为23个系列
①(Flutter、Dart环境搭建篇) 共3个内容 已更新
②(Dart语法1 篇) 共4个内容 已更新
③(Dart语法2 篇) 共2个内容 已更新
④(Flutter案例开发篇) 共4个内容 已更新
⑤(Flutter的StatelessWidget 共3个内容 已更新
⑥(Flutter的基础Widget篇) 共2个内容 已更新
⑦(布局Widget篇) 共1个内容 已更新
⑧(Flex、Row、Column以及Flexible、Stack篇) 共1个内容 已更新
⑨(滚动的Widget篇) 共4个内容 已更新
⑩(Dart的Future和网络篇) 共3个内容 已更新
⑪(豆瓣案例-1篇) 共3个内容 已更新
⑫(豆瓣案例-2篇) 共3个内容 已更新

官方文档说明

官方视频教程
Flutter的YouTube视频教程-小部件

---

①、ListView

Flutter的List官方文档

1.ListView的创建几种方式

官方文档说明的创建几种方式

1. List()
2. List.generate(100, (index) {return Text("Hello world");})
3.

1.1 ListView.generate 以及 ListTile 结合使用 (如果创建100个 那么Flutter会一次性创建100个)

class ListViewGenerateWidget extends StatelessWidget {const ListViewGenerateWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return ListView(// 滚动方式scrollDirection: Axis.horizontal,// 每个item的宽度itemExtent: 200,// 反向属性 true 就0在最右侧 https://api.flutter.dev/flutter/widgets/ScrollView/reverse.html// reverse: true,// // primary: ,children: List.generate(100, (index) {return ListTile(leading: Icon(Icons.people),trailing: Icon(Icons.delete),title: Text("联系人 ${index}"),subtitle: Text("联系人 电话号码 185100000123"),);}),);}
}

1.1 效果图 - ListView.generate 以及 ListTile 结合使用

1.2 ⭐️ListView.builder 需要展示的时候 才去加载

// 创建方式2: ListViewBuilder 比较常用一些
class ListViewBuilderWidget extends StatelessWidget {const ListViewBuilderWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return ListView.builder(// 可能展示100个itemCount: 100,//itemExtent: 60,itemBuilder: (BuildContext ctx,int index){return Text("hello world ${index}",style: TextStyle(fontSize: 20));},);}
}

1.3 ListView.separated 分割线

// 分割线
// 会自适应高度
class ListSeparatedDemoWidget extends StatelessWidget {const ListSeparatedDemoWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return ListView.separated(itemCount: 100,itemBuilder: (BuildContext ctx,int index){return Text("hello world ${index} ",style: TextStyle(fontSize: 20));},// 分割线separatorBuilder: (BuildContext ctx,int index) {// Divider 线//   height 是占据整个区域有多高//   indent 开始的间距//   endIndent 尾部间距//  thickness 线的整体高度return Divider(color: Colors.red,height: 100,indent: 20,endIndent: 30,thickness: 20,);},);}
}

1.3 效果图 - ListView.separated 分割线

---

②、GridView

Flutter的GridView官方文档

1.1 GridView的使用 SliverGridDelegateWithFixedCrossAxisCount

class GridViewWidget extends StatelessWidget {const GridViewWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Padding(padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 8),child: GridView(///*** SliverGridDelegateWithFixedCrossAxisCount* 在交叉轴上创建具有固定数量的图块的网格布局。例如，如果网格是垂直的，则此委托将创建具有固定列数的布局。如果网格是水平的，则此委托将创建具有固定行数的布局。此委托创建具有相同大小和间距的图块的网格。* */gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(// 交叉轴 返回多少个crossAxisCount: 3,// 宽度 / 高度 的比例 是1.5childAspectRatio: 1.5,// 交叉轴的间距crossAxisSpacing: 8,// 主轴的间距mainAxisSpacing: 8),children: List.generate(100, (index){return Container(color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),);}),),);}
}

1.2 GridView的使用 SliverGridDelegateWithMaxCrossAxisExtent

class GridViewMaxCrossAxisExtentDemoWidget extends StatelessWidget {const GridViewMaxCrossAxisExtentDemoWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Padding(padding: EdgeInsets.symmetric(horizontal: 0),child: GridView(gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(// maxCrossAxisExtent 一个item最大的宽度maxCrossAxisExtent: 400,childAspectRatio: 1.5,crossAxisSpacing: 8,mainAxisSpacing: 8),children: List.generate(100, (index){return Container(color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),);}),),);}
}

1.2 效果图 - GridView的使用 SliverGridDelegateWithMaxCrossAxisExtent

1.3 ⭐️GridView.builder

builder 作用

1. 只有在屏幕显示的时候 才会去加载builder的方法

// 3. GridView.builder 只有在屏幕显示的时候 才会去加载builder的方法 性能比较好一点
class GridViewBuilderWidget extends StatelessWidget {const GridViewBuilderWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 8,mainAxisSpacing: 8),itemBuilder: (BuildContext ctx,int index) {return Container(color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),);});}
}

1.3 效果图 - GridView.builder

1.4 瀑布流可以使用第三方

flutter_staggered_grid_view

---

③、SliverView

Flutter的GridView官方文档
作用是:在同一个页面可以创建多个ListView 和 GridView

3.1 SliverView的使用 以GirdView为例

// SliverView的使用 能包裹 ListView 和 GridView
class SliverViewDemoWidget extends StatelessWidget {const SliverViewDemoWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return CustomScrollView(slivers: [SliverGrid(delegate: SliverChildBuilderDelegate((BuildContext ctx,int index){return Container(color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),);},// 返回多少个childCount: 100),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4,crossAxisSpacing: 8,mainAxisSpacing: 8,childAspectRatio: 1.5),)],);}
}

3.1 效果图-SliverView的使用 以GirdView为例

3.2 iOS的SafeArea 和 SliverSafeArea 安全区域的区别

GridView在安全区域的iPhone会超出。如何防止安全区域问题
1.使用SafeArea进行包裹 用户体验不好。滚动在最顶部没有展示超出的范围
2.在滚动到最顶部需要现实展示的UI

3.2.1 使用SafeArea进行包裹 用户体验不好。滚动在最顶部没有展示超出的范围

SafeArea(child:xxxWidget)

3.2.1 在滚动到最顶部需要现实展示的UI 使用SliverSafeArea

 SliverSafeArea(sliver:xxxxWidget)

3.3 SliverPadding的使用

我们在使用ListView或者GridView的时候 。当我们添加了内边距之后。

1. 发现滚动向上的时候 。内边距依然还是有的
2. 如果处理这个问题
3. 我们使用SliverListView或者GridView进行替代ListView或者GridView
   并且 使用SliverPadding 可以修复 向上滚动出现的内边距问题

SliverPadding的使用 code

class SliverViewDemoWidget extends StatelessWidget {const SliverViewDemoWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return CustomScrollView(slivers: [SliverSafeArea(sliver: SliverPadding(padding: EdgeInsets.all(8),sliver: SliverGrid(delegate: SliverChildBuilderDelegate((BuildContext ctx,int index){return Container(color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),);},// 返回多少个childCount: 100),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4,crossAxisSpacing: 8,mainAxisSpacing: 8,childAspectRatio: 1.5),),),)],);}
}

3.3 效果图 SliverPadding的使用

3.4 SliverView的使用 以ListView、GirdView综合使用

类似个人主页的案例

class SliverListViewAndGridViewWidget extends StatelessWidget {const SliverListViewAndGridViewWidget({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return CustomScrollView(slivers: [// 如果不想系统的Bar在顶部。可以把系统的Bar隐藏。// 使用下面Bar。这样滚动是一个整体滚动的 // 能随着内容滚动而滚动SliverAppBar(// 扩展的内容flexibleSpace: FlexibleSpaceBar(title: Text("Hello world"),background: Image.asset("assets/images/gtr.png",fit:BoxFit.cover),),// 扩展高度expandedHeight: 200,// 不跟随滚动而滚动pinned: true,),SliverGrid(delegate: SliverChildBuilderDelegate((BuildContext ctx,int index){return Container(color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),);},// 返回多少个childCount: 10),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4,crossAxisSpacing: 8,mainAxisSpacing: 8,childAspectRatio: 1.5),),SliverList(delegate: SliverChildBuilderDelegate((BuildContext ctx,int index){return ListTile(leading: Icon(Icons.people),trailing: Icon(Icons.delete),title: Text("联系人 ${index}"),subtitle: Text("联系人 电话号码 185100000123"),);},childCount: 20,),)],);}
}

3.4 效果图 - SliverView的使用 以ListView、GirdView综合使用

---

④、滚动的监听 - 以回到顶部的页面为例

1. 使用controller进行监听滚动

弊端是: 无法监听到 开始滚动和结束滚动，只能监听到滚动

class YHiOSHomePage extends StatefulWidget {@overrideState<YHiOSHomePage> createState() => _YHiOSHomePageState();
}class _YHiOSHomePageState extends State<YHiOSHomePage> {// 偏移300ScrollController _controller = ScrollController(initialScrollOffset: 300);bool _isShowFloatingBtn = false;/*** 两种方式可以监听：* Controller：* 1.可以设置默认值 offset* 2.监听滚动，也可以监听滚动的位置* NotificationListener* 1.开始滚动和结束滚动* */@overridevoid initState() {// TODO: implement initStatesuper.initState();_controller.addListener(() {print("监听到滚动.... ${_controller.offset}");setState(() {_isShowFloatingBtn = _controller.offset >= 1000;});});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("列表测试_Widget"),),floatingActionButton: _isShowFloatingBtn ? FloatingActionButton(child: Icon(Icons.arrow_upward),onPressed: (){print("点击了回到顶部");_controller.animateTo(0, duration: Duration(seconds: 1), curve: Curves.easeIn);},) : null,body: ListView.builder(controller: _controller,itemBuilder: (BuildContext cxt,int index){return ListTile(leading: Icon(Icons.people),title: Text("联系人 ${index}"),);},itemCount: 100,),);}
}

2. 使用NotificationListener进行监听滚动

可以监听 开始滚动和结束滚动
把滚动Widget 用一个NotificationListener 包裹

class YHiOSHomePage extends StatefulWidget {@overrideState<YHiOSHomePage> createState() => _YHiOSHomePageState();
}class _YHiOSHomePageState extends State<YHiOSHomePage> {// 偏移300ScrollController _controller = ScrollController(initialScrollOffset: 300);bool _isShowFloatingBtn = false;/*** 两种方式可以监听：* Controller：* 1.可以设置默认值 offset* 2.监听滚动，也可以监听滚动的位置* NotificationListener* 1.开始滚动和结束滚动* */@overridevoid initState() {// TODO: implement initStatesuper.initState();_controller.addListener(() {// print("_controller 监听到滚动.... ${_controller.offset}");setState(() {_isShowFloatingBtn = _controller.offset >= 1000;});});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("列表测试_Widget"),),floatingActionButton: _isShowFloatingBtn ? FloatingActionButton(child: Icon(Icons.arrow_upward),onPressed: (){print("点击了回到顶部");_controller.animateTo(0, duration: Duration(seconds: 1), curve: Curves.easeIn);},) : null,body: NotificationListener(onNotification: (ScrollNotification notification) {print("NotificationListener 监听到滚动....");if(notification is ScrollStartNotification){print("开始滚动");}else if (notification is ScrollUpdateNotification){print("正在滚动 总滚动距离: ${notification.metrics.maxScrollExtent} 当前滚动的位置 : ${notification.metrics.pixels}");}else if (notification is ScrollEndNotification){print("结束滚动");}return true;},child: ListView.builder(controller: _controller,itemBuilder: (BuildContext cxt,int index){return ListTile(leading: Icon(Icons.people),title: Text("联系人 ${index}"),);},itemCount: 100,),),);}
}

④、效果图 - 滚动的监听 - 以回到顶部的页面为例

---

小贴士

1.设置快捷指令

1.1. 创建dart文件

1.2. 创建模板

1.2.1 使用快捷指令创建模板

【Flutter从入门到实战】 ⑨、滚动的Widget-ListView、GridView、SliverWidget、滚动的Widget的滚动监听的方式相关推荐

1. 【Flutter从入门到实战】⑪、豆瓣案例-1、星星评分Widget、虚线Widget、TabbarWidget、BottomNavigationBarItem的封装、初始化配置抽取

   Flutter从入门到实战 一共分为23个系列 ①(Flutter.Dart环境搭建篇) 共3个内容 已更新 ②(Dart语法1 篇) 共4个内容 已更新 ③(Dart语法2 篇) 共2个内容 已更新 ...

2. 【Flutter从入门到实战】 ⑧、FlexWidget、Flex的主轴和交叉轴、Row和Column的使用、Expanded的FlexFit和flex的使用、Stack、Positioned的使用

   Flutter从入门到实战 一共分为23个系列 ①(Flutter.Dart环境搭建篇) 共3个内容 已更新 ②(Dart语法1 篇) 共4个内容 已更新 ③(Dart语法2 篇) 共2个内容 已更新 ...

3. 新书推荐 | Flutter技术入门与实战（第2版）

   新书推荐 <Flutter技术入门与实战(第2版)> 长按二维码 了解及购买 从实战角度出发,手把手教会Flutter,案例丰富,实操性强. 编辑推荐 本书在上一版的基础上,根据Flutt ...

4. Flutter从入门到实战（一）之环境搭建（Mac版）

   Flutter从入门到实战(一)之环境搭建(Mac版) Flutter官网镇楼 Flutter SDK 下载 镜像使用 运行 flutter doctor iOS环境配置 Android环境配置 下载 ...

5. Flutter+Dart入门与实战套餐(含电子商城系统)

   套餐(全): https://ke.qq.com/course/package/23970?tuin=2c77f7f0 课程目标 掌握Dart语言及Flutter跨平台开发技术 适用人群 零基础,小白 ...

6. java 观察者模式_重学 Java 设计模式：实战观察者模式「模拟类似小客车指标摇号过程，监听消息通知用户中签场景」...

   一.前言 知道的越多不知道的就越多 编程开发这条路上的知识是无穷无尽的,就像以前你敢说精通Java,到后来学到越来越多只想写了解Java,过了几年现在可能想说懂一点点Java.当视野和格局的扩大,会让 ...

7. 学区摇号软件设计_重学 Java 设计模式：实战观察者模式「模拟类似小客车指标摇号过程，监听消息通知用户中签场景」...

   作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获!

8. 重学 Java 设计模式：实战观察者模式「模拟类似小客车指标摇号过程，监听消息通知用户中签场景」

   作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获!

9. python编程入门与案例详解pdf-Flutter技术入门与实战 PDF 清晰版

   给大家带来的一篇关于Flutter相关的电子书资源,介绍了关于Flutter入门.Flutter实战.Flutter技术方面的内容,本书是由机械工业出版社出版,格式为PDF,资源大小162.5 MB, ...

最新文章

1. 机器学习的数据类型有哪几种？每种数据类型对应的操作有哪些？为什么？
2. hdu3714 水三分
3. 【Python】Pyecharts数据可视化模块练习
4. java面向对象编程集合边框_Java学习系列(七)Java面向对象之集合框架详解(上)
5. 王道计算机网络 数据链路层整理 超详细版
6. SpringBoot精通系列-如何封装Spring Boot异常捕获
7. 两数相除赋值整数变量（T-SQL）
8. 安装DotNetCore.1.0.0-VS2015Tools.Preview2.exe 错误Error 0x81f40001 解决方法
9. 百度web前端面试2015.10.18
10. linux抓取僵尸网络进程脚本
11. 《21天学通C语言（第7版）》一2.5 答 疑
12. 理论 - 半波偶极子天线原理与计算
13. 语音处理：霍夫曼编码算法原理分析
14. Mysql从入门到入魔——8. 视图、存储过程、事务处理
15. C语言OJ1116,9度OJ 题目1116：加减乘除
16. 基于Go语言Echo+Vue+ElementUI的OA办公系统
17. [足式机器人]Part3机构运动微分几何学分析与综合Ch02-3 平面机构离散运动鞍点综合——【读书笔记】
18. gcc编译工具常用命令以及汇编语言
19. linux usb声卡 无声音,记一次解决在Ubuntu 18.04下声卡没有声音的经历
20. Sawyer_Physics_Simulator_Guidelines

热门文章

1. 瀚高股份吕新杰：创新开源双驱动 躬耕国产数据库
2. P3498 [POI2010]KOR-Beads（hash表）
3. opencv基本操作入门指南 （代码 + 讲解 + 边缘提取示例 + 调取摄像头demo）
4. 十八、R语言特征工程实战
5. 全新升级ADS-B地面接收机室外机 pingStation3
6. fastcam与soldworks冲突解决办法
7. -＞在Ｃ语言或Ｃ＋＋中的含义
8. motionbest】 动态野兽AE课程人工翻译【画质高清有素材】
9. cppcheck 自定义规则,cppcheck的规则集
10. querylist.php下载,下载QueryList