Flutter ListView 局部刷新数据、ListView点赞收藏

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒随时随记每日积累随心而过

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

本文章实现的是 ListView 中 Item 局部数据刷新的效果，如下图所示。

在这只是一个 Demo ，是一个实现思路，在应用开发的更多场景中如资讯列表的点赞、收藏等等，诸多业务场景都可使用。

1 Demo 实现

首先是这里使用列表使用到的数据模型定义如下：完整源码

///ListView 测试数据 Model
class TestBean {String name;bool isCollect;TestBean({this.name, this.isCollect});
}

然后就是 ListView 实现的主页面，定义如下：

///ListView 局部数据更新使用 Demo
class TestListPartPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return _TestABPageState();}
}class _TestABPageState extends State {///测试数据集合List<TestBean> _testList = [];@overridevoid initState() {super.initState();///模拟测试数据for (int i = 0; i < 100; i++) {_testList.add(TestBean(name: "测试数据 $i", isCollect: false));}}@overrideWidget build(BuildContext context) {///页面主体脚手架return Scaffold(appBar: AppBar(title: Text("ListView 局部数据更新 "),),body: buildListView(),);}///构建一个列表 ListViewbuildListView() {///懒加载模式构建return ListView.builder(///子Item的构建器itemBuilder: (BuildContext context, int index) {///每个子Item的布局///在这里是封装到了独立的 StatefulWidgetreturn TestListItemWidget(///子Item对应的数据bean: _testList[index],///可选参数 子Item标识key: GlobalObjectKey(index),);},///ListView子Item的个数itemCount: _testList.length,);}
}

每个子 Item 的UI布局及功能封装成了一个独立的 StatefulWidget，代码如下：

///ListView 的子Item
class TestListItemWidget extends StatefulWidget {///本Item对应的数据模型final TestBean bean;TestListItemWidget({@required this.bean, Key key}) : super(key: key);@overrideState<StatefulWidget> createState() {return _ListItemState();}
}

class _ListItemState extends State<TestListItemWidget> {@overrideWidget build(BuildContext context) {return Material(child: Container(color: Colors.grey[300],padding: EdgeInsets.only(top: 5,bottom: 5,),child: Container(padding: EdgeInsets.only(left: 15,right: 15,),color: Colors.white,height: 60,child: buildRow(),),),);}///内容区域Row buildRow() {///左右线性排开return Row(children: [///权重布局 文本占用空白区域Expanded(child: Text("${widget.bean.name}",)),///收藏按钮RaisedButton(///按钮的背景color: widget.bean.isCollect ? Colors.blue : Colors.grey[200],///点击更新当前 Item 数据以及刷新页面显示onPressed: () {setState(() {widget.bean.isCollect = !widget.bean.isCollect;});},child: Text("${widget.bean.isCollect ? '已收藏' : '收藏'}",style: TextStyle(color: widget.bean.isCollect ? Colors.white : Colors.red),),),],);}
}

2 原理分析

很多个为什么，咱们一一来分析，大家如果有疑问或者不同的看法，可以回复评论，一起优化

2.1 实现的真的是局部刷新吗？

答案为是的，在这里模拟了100条数据，但是这里使用的是懒加载模式构建的，所以实际绘制出来的 Item 并不是 100 条，如下图所示：

滑动时，滑出屏幕外的，超出ListView缓存区域的就会被销毁，在本 Demo 本测试模拟器中，ListView中始终是绘制的 16 个子 Item。

ListView 每一个子 Item 都是一个独立的 StatefulWidget ，都对应的是一个独立的 State ，所以调用 setState方法来刷新只是刷新了当前的 StatefulWidget 内容区域，当然从源码角度也有另外的解读，这里不去说源码。

当然在实际业务场景中，你的 ListView 中的 Item的UI布局功能可能足够的复杂，不用担心，你也可以采用这种思路，把每个 Item 中的部分 Widget 再次封装到不同的StatefulWidget 中，这样也能实现ListView 中一个Item中不同的Widget 刷新不同的区域。

当然也可以在 ListView 的Item 中使用 Stream 、Provider 、BloC等等，小编这里也有说明点击查看

2.2 状态如何保存的？？？

通过数据模型来保存的状态，因为在这里使用的是根据 TestBean 中 isCollect 的值来构建不同的样式的，List中保存的 TestBean 的标识不同，构建的子Item的样式不同。

2.3 List 中的数据是如何更新的？？？

还是这一句更新的：

   setState(() {widget.bean.isCollect = !widget.bean.isCollect;});

效果同下

   ///修改数据widget.bean.isCollect = !widget.bean.isCollect;///刷新页面显示setState(() {  });

在这一步修改数据，看下图你就明白了

ListView 的子Item 中（TestListItemWidget）使用的数据模型在内存区域中还是在 TestListPartPage 这里创建的 _testList 集合中保存的对象实体，整个过程中只是通过指针索引来绑定数据，修改数据实际上修改的还是同一块内存区域中的数据。

完毕

以小编的性格，要实现百万Demo随时复制粘贴肯定是需要源码的 github 完整源码点击查看

当然以小编的性格，肯定是要有视频录制的，目前正在录制中，你可以关注一下西瓜视频 — 早起的年轻人随后会上传