FlutterDojo设计之道—状态管理之路（七，Android学习笔记在互联网上火了

var api = API();

其它的UI代码，大家可以参考Dojo的源码，如下所示。

flutter_dojo/category/backend/providerstate4widget.dart

使用Setstate

首先来看下最基本的方式。通过setState来更新数据，其原理就是在Future完成之后，使用setState刷新UI。核心代码如下所示。

获取数据。

data.getData(pageIndex).then((value) {
setState(() => data.dataList = value);
});

刷新选中。

Checkbox(
value: itemModel.isCheck,
onChanged: (flag) {
setState(() {
var isCheck = itemModel.isCheck;
if (isCheck) {
checkedCount–;
} else {
checkedCount++;
}
return itemModel.isCheck = !isCheck;
});
}),

下拉刷新与上拉加载。

RaisedButton(
onPressed: () {
setState(() => data.dataList.clear());
data.getData(0).then((value) {
setState(() => data.dataList = value);
});
},
child: Text(‘Refresh’),
),
RaisedButton(
onPressed: () {
data.getData(++pageIndex).then((value) {
setState(() => data.dataList = value);
});
},
child: Text(‘Load More’),
),
Text(‘Checked Count $checkedCount’),

这种方式并没有什么问题，特别是当List占据当整个UI界面时，这样其实最简单也不太会影响效率。只有当页面比较复杂的时候，才需要考虑采用Provider来降低刷新带来的效率问题。

下面我们来考虑下如何通过Selector来改造整个Demo，完成数据刷新、数据加载更多、显示Checked数量几个功能。

改造Model

Model是Provider的数据处理对象，封装了数据模型和对数据的处理操作。这里的改造和前面讲解的使用Provider的Model的处理方式基本相同，代码如下所示。

class ItemModel {
String title;
bool isCheck;
int likeCount;

ItemModel(this.title, this.isCheck, this.likeCount);
}

class DataModel with ChangeNotifier {
List dataList = List();
int checkedCount = 0;
bool shouldListRebuild = true;

getData(int pageIndex) async {
List items = await api.getListDataOfIndex(pageIndex);
shouldListRebuild = true;
dataList.addAll(items);
notifyListeners();
}

refreshData() {
dataList.clear();
checkedCount = 0;
shouldListRebuild = true;
notifyListeners();
}

updateChecked(int index, bool isChecked) {
shouldListRebuild = false;
var item = dataList[index];
if (isChecked) {
check

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

edCount++;
} else {
checkedCount–;
}
dataList[index] = ItemModel(item.title, isChecked, item.likeCount);
notifyListeners();
}
}

新增了几个函数，分别用于获取分页数据，刷新数据，更新Item的Checked状态。

改造ListItem选中的刷新逻辑

在之前的方案中，当我们点击一个Item做修改时，整个List都将Rebuild，通过Selector，可以根据属性筛选，过滤出需要刷新的Item。

当List内容固定时，不需要刷新整个List，只需要更新改变的Item。

在List的ItemBuilder中，我们做一个Selector筛选，筛选内容为dataList中的ItemModel，当在指定的Item中点击CheckBox后，model被更新，所以Selector的shouldRebuild被判断为true，所以这个Item就会被更新，而其它未点击的Item则因为没有改变所以不会被更新，这样就控制了List的刷新范围为被更新的Item，代码如下所示。

return ListView.builder(
itemBuilder: (context, index) {
return Selector<DataModel, ItemModel>(
selector: (context, value) => value.dataList[index],
builder: (BuildContext context, data, Widget child) {
debugPrint((‘Item $index rebuild’));
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Checkbox(
value: data.isCheck,
onChanged: (flag) {
dataModel.updateChecked(index, !data.isCheck);
}),
Text(data.title),