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

flutter使用riverpod对选择状态进行监听,更改了编辑状态和选择状态却不生效。_第1张图片
如图,我预期的效果是:点击删除按钮,会删除勾选项,并退出编辑状态,同时隐藏删除按钮。

实际运行效果却是只退出了编辑状态,并未隐藏删除按钮。
在我的逻辑判断当中,明明已经退出编辑状态,并且清空了对应的选择集合,那理论上就应该既显示编辑按钮,又隐藏删除按钮才对。搞了很久才弄明白,在逻辑中单纯地调整对应的状态并不够,还要对应的监视效果(也就是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();
                  }
                }),

你可能感兴趣的:(笔记,flutter,riverpod,条件渲染)