首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter ListView 局部刷新数据、ListView点赞收藏

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

原创
作者头像
早起的年轻人
修改2020-10-23 10:18:07
3.5K0
修改2020-10-23 10:18:07
举报

题记

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


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 {
  @override
  State<StatefulWidget> createState() {
    return _TestABPageState();
  }
}

class _TestABPageState extends State {
  ///测试数据集合
  List<TestBean> _testList = [];

  @override
  void initState() {
    super.initState();
    ///模拟测试数据
    for (int i = 0; i < 100; i++) {
      _testList.add(TestBean(name: "测试数据 $i", isCollect: false));
    }
  }

  @override
  Widget build(BuildContext context) {
    ///页面主体脚手架
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView 局部数据更新 "),
      ),
      body: buildListView(),
    );
  }

  ///构建一个列表 ListView
  buildListView() {
    ///懒加载模式构建
    return ListView.builder(
      ///子Item的构建器
      itemBuilder: (BuildContext context, int index) {
        ///每个子Item的布局
       ///在这里是封装到了独立的 StatefulWidget
        return 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);

  @override
  State<StatefulWidget> createState() {
    return _ListItemState();
  }
}
class _ListItemState extends State<TestListItemWidget> {
  @override
  Widget 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 完整源码 点击查看

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 Demo 实现
  • 2 原理分析
    • 2.1 实现的真的是局部刷新吗 ?
      • 2.2 状态如何保存的 ???
        • 2.3 List 中的数据是如何更新的 ???
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档