dart ValueListenableBuilder未重建屏幕,热加载时,它正在工作

ix0qys7i  于 2023-01-18  发布在  其他
关注(0)|答案(1)|浏览(110)

我正在尝试构建一个笔记应用程序,所有数据和其他东西都运行良好,因为在保存代码文件时,数据会显示在屏幕上,这很奇怪,第一次遇到这个问题
简而言之,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示例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 [];
    }

  }

还有一个创建注解的页面,当按下创建注解按钮时,只有一个函数在这里调用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');
    }
  }

一切正常,但在添加数据时,即使通知程序处于活动状态,UI也不会刷新
如果你需要完整的代码,请看这个github链接:https://github.com/Mishalhaneef/Note-app

9rbhqvlz

9rbhqvlz1#

由于ValueNotifier的类型为List<NoteModel>,因此当您向列表添加新项、从列表中删除项或清除所有项时,该值不会更改。此处的值是对列表的引用,该列表不会更改。
你必须给它赋一个新的值,比如:

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

您可以使用List.fromremoveWhereadd等操作当前列表,然后重新分配整个列表。
此外,在ValueNotifier的情况下,您不需要调用notifyListeners,框架会处理它,请参见此处。
另一种方法是使用定制的ChangeNotifierProvider,当列表的内容发生变化时,可以调用notifyListeners
一些进一步的建议:
1.在homescreen.dart文件中,可以使用newNotes[index]代替NoteDB.instance.noteListNotifier.value[index]
1.在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 [];
    }
  }

相关问题