Flutter开发 KeepAlive组件的手动更新&页面返回更新&局部更新

Sakuramissing

已于 2024-01-03 14:03:34 修改

阅读量598

点赞数 15

分类专栏： Flutter 爬坑日记文章标签： flutter java

于 2024-01-02 16:49:49 首次发布

本文链接：https://blog.csdn.net/sakuramissing/article/details/135344342

版权

Flutter 爬坑日记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在开发过程中，经常遇到需要缓存的页面，尤其是在tabbarview切换的时候，需要保存原来的页面状态，所以会用到keepalive的相关组件，但是有时候我们又需要手动去更新这个缓存的组件，这个时候就需要用到ValueListenableBuilder，通过控制变量的变化进行手动局部更新。

1、定义进行控制的变量，可以是String，bool，int等类型，如图为String类型

  final ValueNotifier<String> Flag = ValueNotifier<String>("myflag");

2、在合适的时机进行修改该变量的值，我的需要是在页面返回的时候，判断是否返回带了参数，带参数说明需要更新（常用于在列表页跳转到添加页面，添加完后返回需要进行页面更新，正常是会自动更新，但是如果进行了缓存则不会更新），则修改。

onTap: () => Navigator.of(context)
    .pushNamed("/addColleague")
    .then((value) {
         if (value != null) {
             Flag.value = "myFlag2";
         }
}),

3、用ValueListenableBuilder包裹需要进行手动更新的页面

TabBarView(
   controller: _tabController,
   children: [
      KeepAliveWrapper(child: OrganizationStructure()),
      // 本文为两个缓存的tabbarview页面，第二个页面在添加完后需要刷新
      ValueListenableBuilder<String>(
         builder: (BuildContext context, String value, Widget? child) {
            return KeepAliveWrapper(
                    child: AddressBookPage(
                  key: ValueKey(value),
                ));
              },
              valueListenable: Flag,
      ),
   ]
),

尝试过通过修改 widget 的key进行更新，没有更新，应该是keepalivewrapper的缘故，引入ValueListenableBuilder后成功~