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

【问题标题】：how to add new element to Slivers Flutter with changing the UI?如何通过更改 UI 向 Slivers Flutter 添加新元素？
【发布时间】：2022-01-21 15:10:22
【问题描述】：

一旦用户点击发送按钮，我需要。他添加的文本输入字段将被添加到要在 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,
                ),
              ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-sliver

【解决方案1】：

据我所见，您应该在 build 方法之外初始化 Messages 列表，因为每次重新创建视图时，它都会重新初始化它，并且您只会拥有一开始传递的那些值，否则我建议您也声明 message_controller 并在 initState 中对其进行初始化，以便当您尝试访问它时，它不会返回 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,
                  ),
                );
              }),
        ));
  }
}

【讨论】：