ValueListenableBuilder 沒有重建屏幕，在熱重載時，它正在工作

Question

我正在嘗試構建一個筆記應用程序，所有數據和其他東西都運行良好，因為在保存代碼文件時數據顯示在屏幕上，這很奇怪，第一次遇到這個問題

簡而言之，當從應用程序添加數據時，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',
                      );
                    },
                  ),
                );
              },
            )),

這是 NoteDB.instance.getAllNotes(); function

       @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 [];
    }

  }

還有一個創建筆記的頁面，當按下創建筆記按鈕時，只有一個 function 在這里調用是 function

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');
    }
  }

一切正常，但在添加數據時，即使通知程序處於活動狀態，用戶界面也不會刷新

如果您需要完整代碼，請查看此 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 [];
    }
  }