Flutter - 如何获取 TextField 值并将其显示为新文本

Question

我正在尝试获取用户在 TextFormField 中键入的值，然后将其显示为新消息。现在，我可以使用控制器获取值并显示它，问题是，我需要显示用户输入的所有消息并将它们堆叠在一起（就像一个信使一样）。

这是 FormField 本身，我知道我需要保存用户键入的值，然后通过将其发送到其他地方来从中生成消息，但我不知道该怎么做。 （可能会以某种方式做到这一点的空白？）

final chatfield = TextFormField(
  controller: myController,
  style: TextStyle(
    decorationColor: Colors.white,
    color: Colors.white,
  ),
  autofocus: false,
  onSaved: (String value) {
  },
  decoration: InputDecoration(
    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
    hintStyle: TextStyle(color: Colors.white),
  ),
);

到目前为止，控制器唯一要做的就是获取值并显示它，我想保存并显示用户在 TextFormField 中键入的所有值。

Answer 1

这里有一个基本的例子，你可以使用StatefulWidget、StreamBuilder、FutureBuilder等

      class ChatListSample extends StatefulWidget {
        @override
        ChatListSampleState createState() {
          return new ChatListSampleState();
        }
      }

      class ChatListSampleState extends State<ChatListSample> {
        TextEditingController myController = TextEditingController();

        List<String> messages = List();

        @override
        Widget build(BuildContext context) {
          final chatfield = TextFormField(
            controller: myController,
            style: TextStyle(
              decorationColor: Colors.white,
              color: Colors.white,
            ),
            autofocus: false,
            onSaved: (String value) {},
            decoration: InputDecoration(
              contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
              hintStyle: TextStyle(color: Colors.white),
            ),
          );

          return Scaffold(
              backgroundColor: Colors.purple,
              body: Stack(
                children: <Widget>[
                  Padding(
                    padding:
                        const EdgeInsets.only(left: 20.0, right: 20, bottom: 100),
                    child: ListView.builder(
                      itemCount: messages.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(messages[index]),
                        );
                      },
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        chatfield,
                        MaterialButton(
                          child: Text("send message"),
                          onPressed: () {
                            setState(() {
                              messages.add(myController.text);
                              myController.clear();
                            });
                          },
                        )
                      ],
                    ),
                  )
                ],
              ));
        }
      }