ValueListenableBuilder没有重建屏幕，当热重新加载时，它正在工作

Question

我正在尝试构建一个note应用程序，所有数据和其他东西都能完美工作，因为当代码文件保存时，数据会显示在屏幕上，这很奇怪，第一次面对这个问题

简而言之，当数据从应用程序添加时，valuelistanble不是在侦听，而是在热重新加载数据时显示

我该怎么解决这个问题，这是代码

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
WidgetsBinding.instance!.addPostFrameCallback((_) async {
final value = await NoteDB.instance.getAllNotes();
});
____________________________________________
____________________________________________
//code line for aligment 
Expanded(
child: ValueListenableBuilder(
valueListenable: NoteDB.instance.noteListNotifier,
builder: (context, List<NoteModel> newNotes, _) {
return GridView.count(
childAspectRatio: 3 / 4,
crossAxisCount: 2,
mainAxisSpacing: 34,
crossAxisSpacing: 30,
padding: const EdgeInsets.all(20),
//generating list for all note
children: List.generate(
newNotes.length,
(index) {
//setting the notelist to a variable called [note]
final note = newNotes[index];
if (note.id == null) {
//if the note's id is null set to sizedbox
//the note id never be null
const SizedBox();
}
return NoteItem(
id: note.id!,
//the ?? is the statement (if null)
content: note.content ?? 'No Content',
title: note.title ?? 'No Title',
);
},
),
);
},
)),

这里是NotesDB.instance.getAllNotes((；功能

@override
Future<List<NoteModel>> getAllNotes() async {

final _result = await dio.get(url.baseUrl+url.getAllNotes);
if (_result.data != null) {
final  noteResponse = GetAllNotes.fromJson(_result.data);
noteListNotifier.value.clear();
noteListNotifier.value.addAll(noteResponse.data.reversed);
noteListNotifier.notifyListeners();
return noteResponse.data;
} else {
noteListNotifier.value.clear();
return [];
}
}

还有一个创建注释的页面，当按下创建注释按钮时，这里只有一个函数调用，即函数

Future<void> saveNote() async {
final title = titleController.text;
final content = contentController.text;
final _newNote = NoteModel.create(
id: DateTime.now().millisecondsSinceEpoch.toString(),
title: title,
content: content,
);
final newNote = await NoteDB().createNote(_newNote);
if (newNote != null) {
print('Data Added to the DataBase Succesfully!');
Navigator.of(scaffoldKey.currentContext!).pushAndRemoveUntil(
MaterialPageRoute(
builder: (context) => HomePage()),
(Route<dynamic> route) => false);
} else {
print('Error caught while data adding to the DataBase');
}
}

一切都很好，但当添加数据时，即使通知程序是活动的，UI也不会刷新

如果您需要完整的代码，请查看github链接：https://github.com/Mishalhaneef/Note-app

Answer 1

由于此ValueNotifier的类型为List<NoteModel>，因此在向列表中添加新项目、从列表中删除或清除所有项目时，该值不会更改。此处的值是对列表的引用，该列表不会更改。

你必须给它分配一个新的值，比如：

noteListNotifier.value = List<NoteModel>[<add your current items here>];

您可以使用List.from、removeWhere、add等操作当前列表，然后重新分配完整列表。

此外，在ValueNotifier的情况下，您不需要调用notifyListeners，框架会处理它，请参阅此处。

另一种方法是使用自定义ChangeNotifierProvider，当列表的内容发生更改时，可以调用notifyListeners。

一些进一步的建议：

1. 在homescreen.dart文件中，可以使用newNotes[index]而不是NoteDB.instance.noteListNotifier.value[index]。

2. 在data.dart中，在getAllNotes中，必须为noteListNotifier设置一个新值，以便传播更改。目前，您只是在修改此列表中的项目，这不被视为更改。试试这个代码：

@override
Future<List<NoteModel>> getAllNotes() async {
//patching all data from local server using the url from [Post Man]
final _result = await dio.get(url.baseUrl+url.getAllNotes);
if (_result.data != null) {
//if the result data is not null the rest operation will be operate
//recived data's data decoding to json map
final _resultAsJsonMap = jsonDecode(_result.data);
//and that map converting to dart class and storing to another variable
final getNoteResponse = GetAllNotes.fromJson(_resultAsJsonMap);
noteListNotifier.value = getNoteResponse.data.reversed;
//and returning the class
return getNoteResponse.data;
} else {
noteListNotifier.value = <NoteModel>[];
return [];
}
}