内容简介:先看下如下截图内copy的部分代码。 首先,首先定义一个列表,代码如下然后,通过上面的定义的列表数据,现在构建
先看下如下截图
以上效果图的代码,是从flutter
官方demo
flutter_gallery
内copy的部分代码。 首先,首先定义一个列表,代码如下
List<String> items = <String>[ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', ]; 复制代码
然后,通过上面的定义的列表数据,现在构建 ListView
的子Widget数据,代码如下
Iterable<Widget> listTiles = items .map<Widget>((String item) => buildListTile(context, item)); Widget buildListTile(BuildContext context, String item) { Widget secondary = const Text( 'Even more additional list item information appears on line three.', ); return ListTile( isThreeLine: true, leading: ExcludeSemantics(child: CircleAvatar(child: Text(item))), title: Text('This item represents $item.'), subtitle: secondary, trailing: Icon(Icons.info, color: Theme.of(context).disabledColor), ); } 复制代码
最后,将生成的子Widget数据填充到 ListView
内,代码如下
ListView( children: listTiles.toList(), ) 复制代码
以上代码,就能完成最上面截图的效果。下面主要对 ListTile
做一下介绍
ListTile
ListTile
是 Flutter
给我们准备好的widget提供非常常见的构造和定义方式,包括文字,icon,点击事件,一般是能够满足基本列表需求。
构造函数
ListTile({ Key key, this.leading, this.title, this.subtitle, this.trailing, this.isThreeLine = false, this.dense, this.contentPadding, this.enabled = true, this.onTap, this.onLongPress, this.selected = false, }) 复制代码
属性
使用
ListTile( //展示三行 isThreeLine: true, //前置图标 leading: ExcludeSemantics(child: CircleAvatar(child: Text(item))), //标题 title: Text('This item represents $item.'), //副标题 subtitle: secondary, //后置图标 trailing: Icon(Icons.info, color: Theme.of(context).disabledColor), ) 复制代码
效果
ListView.builder
ListView.builder适合列表项比较多(或者无限)的情况,因为只有当子Widget真正显示的时候才会被创建。 将上面列表填充的代码修改为 ListView.builder
,代码如下所示
ListView.builder( itemCount: items.length, itemBuilder: (BuildContext context, int index) { return buildListTile(context, items[index]); }) 复制代码
运行结果如下图所示
ListView.separated
ListView.separated
可以生成列表项之间的分割器,它比ListView.builder多了一个separatorBuilder参数,该参数是一个分割器生成器。 将上面列表填充的代码修改为 ListView.separated
,代码如下所示
ListView.separated( itemBuilder: (BuildContext context, int index) { return buildListTile(context, items[index]); }, separatorBuilder: (BuildContext context, int index) { return index % 2 == 0 ? divider1 : divider2; }, itemCount: items.length ) 复制代码
运行结果如下图所示
实例:Listview下拉刷新 上拉加载更多
下面实现首次进入页面,加载数据,下拉能刷新页面数据,上拉能加载更多数据。
下拉刷新
下拉刷新,用到的是 Flutter
自带的 RefreshIndicator
Widget, ListView
主要用 ListView.builder
进行实现。代码如下所示
RefreshIndicator( key: refreshIndicatorKey, child: ListView.builder( itemCount: list.length, itemBuilder: (context, index) { return buildListTile(context, list[index]); }, ), onRefresh: onRefresh) 复制代码
实现下拉刷新,主要需要实现 RefreshIndicator
的 onRefresh
属性,代码如下所示
Future<Null> onRefresh() async { return Future.delayed(Duration(seconds: 2)).then((e) { list.addAll(items); setState(() { //重新构建列表 }); }); } 复制代码
主要实现延迟2s加载数据,在重新刷新列表。 首次进入页面, Loading
状态的实现实现如下面代码所示
void showRefreshLoading() async { await Future.delayed(const Duration(seconds: 0), () { refreshIndicatorKey.currentState.show().then((e) {}); return true; }); } 复制代码
当 Loading
完之后会触发 RefreshIndicator
的 onRefresh
属性,到此,下拉刷新已经实现完毕。 运行效果如下图所示
上拉加载更多
上拉加载需要监听 ListView
的滚动事件,当滚动事件与底部小于50并且有更多数据加载时,才会触发加载更多的逻辑,如下面代码所示
scrollController.addListener(() { var position = scrollController.position; // 小于50px时,触发上拉加载; if (position.maxScrollExtent - position.pixels < 50 && !isNoMore) { loadMore(); } }); void loadMore() async { if (!isLoading) { //刷新加载状态 isLoading = true; setState(() {}); Future.delayed(Duration(seconds: 2)).then((e) { list.addAll(items); //取消加载状态,并提示暂无更多数据 isLoading = false; isNoMore = true; setState(() { //重新构建列表 }); }); } } 复制代码
视图层的代码,当需要处理加载更多的逻辑时, ListView
的 itemCount
属性需要进行加1,用来填充加载更多的视图。如下面代码所示
int getListItemCount() { int count = list.length; if (isLoading || isNoMore) { count += 1; } return count; } 复制代码
ListView
的 itemBuilder
属性,加载更多的视图代码如下所示
Widget builderMore() { return Center( child: Padding( padding: EdgeInsets.all(10.0), child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ isNoMore ? Text("") : SizedBox( width: 20.0, height: 20.0, child: CircularProgressIndicator( strokeWidth: 4.0, valueColor: AlwaysStoppedAnimation(Colors.black)), ), Padding( padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 15.0), child: Text( isNoMore ? "没有更多数据" : "加载中...", style: TextStyle(fontSize: 16.0), ), ), ], ), ), ); } 复制代码
对 RefreshIndicator
代码做如下修改
RefreshIndicator( key: refreshIndicatorKey, child: ListView.builder( controller: scrollController, itemCount: getListItemCount(), itemBuilder: (context, index) { return builderItem(context, index); }, ), onRefresh: onRefresh) Widget builderItem(BuildContext context, int index) { if (index < list.length) { return buildListTile(context, list[index]); } return builderMore(); } 复制代码
运行代码 加载中的效果如下图所示
没有更多数据的效果如下图所示
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
淘宝天猫店是如何运营的
贾真 / 电子工业出版社 / 2017-5 / 49.8
《淘宝天猫店是如何运营的——网店从0到千万实操手册》是由天猫行业Top10卖家、电商圈知名讲师贾真写就的一本运营干货书籍。《淘宝天猫店是如何运营的——网店从0到千万实操手册》的最大卖点就是作者把自己运营店铺的经验系统地总结出来,把碎片化的“干货”形成一个系统的知识体系。句句易懂,读后受益! 现在网上能看到的电商经验,大多是碎片化知识,零散不成体系,其实很难系统地给卖家提供帮助。《淘宝天猫店是......一起来看看 《淘宝天猫店是如何运营的》 这本书的介绍吧!
XML、JSON 在线转换
在线XML、JSON转换工具
HEX CMYK 转换工具
HEX CMYK 互转工具