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