如何通过更改 UI 向 Slivers Flutter 添加新元素？

Question

我需要用户点击发送按钮。他添加的文本输入字段将被添加到列表中以显示在 ListView 中。但 listView 不呈现列表的新元素。当用户点击发送按钮时没有任何变化发生！

代码是：

  Widget build(BuildContext context) {
    List<MessageModel> message = [
      MessageModel(
        isMine: false,
        messageBody: "receiver_message".tr,
        time: "message_time".tr,
      ),
      MessageModel(
        isMine: true,
        messageBody: "message_sender_body".tr,
        time: "message_time".tr,
      ),
    ];
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            child: ListView.builder(
              itemCount: message.length,
              // physics: const BouncingScrollPhysics(),
              itemBuilder: (context, index) => MessageBody(
                isMine: message[index].isMine,
                messageBody: message[index].messageBody,
                time: message[index].time,
              ),
            ),
          ),
        ],
      ),
      bottomNavigationBar: 
       TextField(
          controller: message_controller,
          onChanged: (value) {},
                suffixIcon: IconButton(
                  onPressed: () => setState(() {
                    var x=message_controller.text;
                    print("x $x");
                    message.add(
                      MessageModel(
                        isMine: true,
                        time: "message_time".tr,
                        messageBody: message_controller.text,
                      ),
                    );
                  }),
                  icon: const Icon(
                      Icons.arrow_forward_rounded,
                ),
              ),
        ),
      ),
    );
  }
}

Answer 1

据我所知，您应该在构建方法之外初始化消息列表，因为每次重新创建视图时，它都会重新初始化它，并且您只会拥有在开始，否则我建议你也声明 message_controller 并在 initState 中初始化它，这样当你尝试访问它时，它不会 return null，这是我根据你的代码让你试着更好地理解一点，添加功能在浮动按钮中，希望你能有所帮助



class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  late TextEditingController message_controller;
  List<String> message = ["aaa", "bbb"];

  @override
  void initState() {
    super.initState();
    message_controller = TextEditingController();
  }

  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          top: false,
          child: CustomScrollView(
            slivers: [
              SliverFillRemaining(
                child: SizedBox(
                  height: MediaQuery.of(context).size.height,
                  child: ListView.builder(
                    itemCount: message.length,
                    physics: const BouncingScrollPhysics(),
                    itemBuilder: (context, index) => Text(message[index]),
                  ),
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              var x = message_controller.text;
              message.add(x);
              print(message);
            });
          },
        ),
        bottomNavigationBar: Container(
          color: Colors.red,
          child: TextField(
              controller: message_controller,
              onChanged: (value) {
                IconButton(
                  onPressed: () => setState(() {
                    var x = message_controller.text;
                    print("x $x");
                    message.add(x);
                  }),
                  icon: const Icon(
                    Icons.arrow_forward_rounded,
                    color: Colors.blue,
                  ),
                );
              }),
        ));
  }
}

如何通过更改 UI 向 Slivers Flutter 添加新元素？

how to add new element to Slivers Flutter with changing the UI?

flutter

flutter-sliver