flutter使用riverpod对选择状态进行监听,更改了编辑状态和选择状态却不生效。

在这里插入图片描述
如图,我预期的效果是:点击删除按钮,会删除勾选项,并退出编辑状态,同时隐藏删除按钮。

实际运行效果却是只退出了编辑状态,并未隐藏删除按钮。
在我的逻辑判断当中,明明已经退出编辑状态,并且清空了对应的选择集合,那理论上就应该既显示编辑按钮,又隐藏删除按钮才对。搞了很久才弄明白,在逻辑中单纯地调整对应的状态并不够,还要对应的监视效果(也就是ref.watch什么什么的)所监视的项目跟上才行。
单纯在逻辑中调整对应项的值,并不会触发界面的重构,只有当监视着的目标发生变化,才会引起界面重构。我一开始,只写了Consumer(builder: (context, ref, child) { if (ref.watch(selectedItems).isNotEmpty) { ,并没有把&& ref.watch(isEditMode)加进来,导致即便在逻辑代码里面调整了编辑模式的值,实际上并未引发对应的界面重构。将这个加进去就解决问题了。

Consumer(builder: (context, ref, child) {
   
                  return ElevatedButton(
                    onPressed: () {
   
                      if (ref.read(isEditMode.notifier).state) {
   
                        //如果当前为编辑模式,就更新【列表变化】到数据库
                        ref.read(listProvider.notifier).updateDataInDatabase();
                        ref
                            .read(selectedItems.notifier)
                            .state
                            .clear(); //清空选择状态。
                      }
                      ref.read(isEditMode.notifier).state =
                          !ref.read(isEditMode.notifier).state;
                    },
                    child: Text(ref.watch(isEditMode) ? '完成编辑' : '编辑'),
                  );
                }),
                Consumer(builder: (context, ref, child) {
   
                  if (ref.watch(selectedItems).isNotEmpty &&
                      ref.watch(isEditMode)) {
   
                      //实际就是少了个&&ref.watch(isEditMode)
                    return ElevatedButton(
                      child: const Text("删除"),
                      onPressed: () async {
   
                        //这里写删除选项的逻辑。依据是,从已选择的列表中获取对应的key,然后用到数据库更新语句。
                        await ref
                            .read(listProvider.notifier)
                            .deleteSelectedPrompt(ref
                                .read(selectedItems.notifier)
                                .state); //先读取勾选项的id,再从数据库中删除对应id
                        ref
                            .read(selectedItems.notifier)
                            .state
                            .clear(); //清空选择状态。

                        ref.read(isEditMode.notifier).state =
                            false; //删除了就会退出编辑状态。
                      },
                    );
                  } else {
   
                    return const SizedBox.shrink();
                  }
                }),

相关推荐

  1. REACT选择状态结构

    2023-12-29 05:24:02       30 阅读
  2. [Flutter]使用Provider进行状态管理

    2023-12-29 05:24:02       45 阅读
  3. 自学之路Flutter使用Provider进行状态管理

    2023-12-29 05:24:02       28 阅读
  4. Flutter状态管理选项的比较:利弊探索

    2023-12-29 05:24:02       46 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-29 05:24:02       75 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-29 05:24:02       80 阅读
  3. 在Django里面运行非项目文件

    2023-12-29 05:24:02       64 阅读
  4. Python语言-面向对象

    2023-12-29 05:24:02       75 阅读

热门阅读

  1. gRPC-Go基础(3)基础gRPC服务

    2023-12-29 05:24:02       62 阅读
  2. Linux压缩算法-zstd

    2023-12-29 05:24:02       40 阅读
  3. 3种事件绑定的异同(js的问题)

    2023-12-29 05:24:02       55 阅读
  4. 15. 三数之和

    2023-12-29 05:24:02       56 阅读
  5. SpringBoot-Shiro

    2023-12-29 05:24:02       63 阅读
  6. cfa一级考生复习经验分享系列(十一)

    2023-12-29 05:24:02       48 阅读
  7. SpringBean的初始化与销毁

    2023-12-29 05:24:02       55 阅读
  8. PHP之——函数的使用

    2023-12-29 05:24:02       51 阅读
  9. Redis雪崩效应是什么?

    2023-12-29 05:24:02       50 阅读