屏幕即使构建功能正在运行颤音，也不会更新

Question

因此，我创建了一个聊天应用程序，该应用程序是从Pusher客户端绘制的。每当有新消息时，构建函数确实会重建，我相信小部件列表确实会发生变化，但是屏幕上没有更新。我该如何解决？

Widget build(BuildContext context) {
    // print(messageWidgetList.length);
    return Scaffold(
      backgroundColor: AppColors.lightGrey,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: Text(
          messageTo,
          style: TextStyle(
            color: AppColors.white,
            fontSize: 22,
          ),
        ),
      ),
      body: Stack(
        children: [
          Padding(
            padding:
                const EdgeInsets.only(top: 12, left: 12, right: 12, bottom: 70),
            child: ValueListenableBuilder<List<Widget>>(
              valueListenable: messageWidgetList,
              builder: (context, value, widget) {
                print("Updated");
                print(value.length);
                // print(widget);
                return ListView.builder(
                  // controller: scrollController,
                  physics: AlwaysScrollableScrollPhysics(),
                  reverse: true,
                  addAutomaticKeepAlives: true,
                  itemCount: value.length,
                  itemBuilder: (ctx, index) {
                    // print(index);
                    return value[index];
                  },
                );
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                if (xFilesImages.isNotEmpty)
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: xFilesImages.map<Widget>((element) {
                        return Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10.0),
                          child: SizedBox(
                            height: 100,
                            width: 80,
                            child: Image.file(
                              File(element.path),
                              frameBuilder:
                                  (ctx, child, frame, wasSynchronouslyLoaded) {
                                return SizedBox(
                                  width: MediaQuery.of(ctx).size.width,
                                  height: MediaQuery.of(ctx).size.height,
                                  child: Stack(
                                    children: [
                                      Align(
                                        alignment: Alignment.topRight,
                                        child: Container(
                                          height: 25,
                                          width: 25,
                                          decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            color: AppColors.lightestGrey,
                                          ),
                                          child: FittedBox(
                                            child: GestureDetector(
                                                onTap: () {
                                                  xFilesImages.remove(element);
                                                  setState(() {});
                                                },
                                                child:
                                                    const Icon(Icons.cancel)),
                                          ),
                                        ),
                                      ),
                                      child
                                    ],
                                  ),
                                );
                              },
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                const SizedBox(height: 5),
                Container(
                  height: 60,
                  width: MediaQuery.of(context).size.width,
                  child: Padding(
                    padding:
                        const EdgeInsets.only(left: 10, bottom: 10, right: 10),
                    child: Container(
                      // height: 30,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: AppColors.darkGrey,
                      ),
                      child: TextFormField(
                        // expands: true,
                        style: TextStyle(color: AppColors.white),
                        focusNode: messageFocusNode,
                        controller: messageController,
                        decoration: InputDecoration(
                            contentPadding: const EdgeInsets.only(
                                right: 8, left: 8, top: 14),
                            prefixIcon: InkWell(
                              onTap: () async {
                                if (!(await Permission.camera.isGranted)) {
                                  await Permission.camera.request();
                                  await Permission.photos.request();
                                }
                                ImagePicker _picker = ImagePicker();
                                xFilesImages =
                                    await _picker.pickMultiImage() ?? [];
                                print("Got xFiles");
                                print(xFilesImages.length);
                                for (XFile xFile in xFilesImages) {
                                  print(xFile.name);
                                  print(xFile.path);
                                }
                                setState(() {});
                              },
                              child: Icon(
                                Icons.attachment,
                                size: 34,
                                color: AppColors.lightestGrey,
                              ),
                            ),
                            suffixIcon: GestureDetector(
                              onTap: () async {
                                //TODO: When you wake up, you have implemented picking images. Work on displaying picked images and then sending them
                                // loading = true;
                                // messageController.text = '';
                                if (messageController.text.isNotEmpty ||
                                    xFilesImages.isNotEmpty) {
                                  messageFocusNode.unfocus();
                                  // messageWidgetList.add(sentMessage(
                                  //     {"message": messageController.text}));
                                  setState(() {});
                                  print("Sent button clicked");
                                  ApiProvider.sendMessage(
                                      widget.userModel.bearerToken,
                                      widget.senderPhone.phoneNumbers.first,
                                      messageTo,
                                      messageController.text,
                                      xFilesImages);
                                  // loading = false;

                                  messageController.text = '';
                                  xFilesImages = [];
                                  setState(() {});
                                }
                              },
                              child: const Icon(
                                Icons.send,
                                size: 30,
                                color: const Color(0xFF004b77),
                              ),
                            ),
                            fillColor: AppColors.lightGrey,
                            hintText: "Enter message...",
                            hintStyle:
                                TextStyle(color: AppColors.lightestGrey)),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          if (loading)
            Container(
              height: double.infinity,
              width: double.infinity,
              color: AppColors.lightGrey.withOpacity(0.3),
              child: Center(
                  child: SpinKitChasingDots(
                color: AppColors.blue,
              )),
            )
        ],
      ),
    );
  }

Answer 1

不好，效果不好

 static final List<Widget> items= [];
 Widget build(BuildContext context) {
     return ListView(children: items); // <-- look here
 }

，确实适当地更新

 static final List<Widget> items= [];
 Widget build(BuildContext context) {
     return ListView(children: [...items]); // <-- look here
 }

了额外的小英里

 static final List<Widget> items= [];
 Widget build(BuildContext context) {
     return ListView(children: <Widget>[...items]); // <-- look here
 }

Setstate需要一个全新的对象才能正确更新。如果那里发生了变化，它不会在此处查看列表。