Flutter 自动将文本字段输入更新到列表视图

Question

如果有人能帮助我将输入值更新到列表视图，如下图所示，我将不胜感激：

基本上我的TextField是这样的：


TextField(
                                                                    keyboardType:
                                                                        TextInputType
                                                                            .multiline,
                                                                    maxLines:
                                                                        null,
                                                                   
                                                                    controller:_controllerPassPhrase,
                                                                  )

我的列表视图是这样的：


ListView.separated(
                                            separatorBuilder:
                                                (context, index) => Divider(
                                                      color: Colors.white,
                                                    ),
                                            itemCount:
                                                data == null ? 0 : data.length,
                                            itemBuilder: (context, index) {
                                              
                                              return Card(

                                              Text" Input field should come here when send button clicked ",

                                              );
                                            })

因此，每当用户在我的文本字段中输入任何内容时，我希望它立即转到列表视图，就像附加的 GIF 文件一样。

Answer 1

您可以拥有 List 个 Strings（在此示例中名为 data）并使用您的输入消息填充它。 根据您在评论部分的要求进行更新您可以拥有包含 username 和 comment 的自定义类型 List，如下所示：

class _TestState extends State<Test> {
  final _controllerPassPhrase = TextEditingController();
  final _controllerUsername = TextEditingController();
  List<UserWithComment> data = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            SizedBox(
              height: 300,
              child: ListView.separated(
                separatorBuilder: (context, index) => Divider(
                  color: Colors.white,
                ),
                itemCount: data == null ? 0 : data.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: Text(
                      data[index].username + ": ${data[index].comment}",
                    ),
                  );
                },
              ),
            ),
            TextField(
              decoration: InputDecoration(hintText: 'username'),
              textInputAction: TextInputAction.next,
              controller: _controllerUsername,
            ),
            TextField(
              decoration: InputDecoration(hintText: 'comment'),
              keyboardType: TextInputType.multiline,
              textInputAction: TextInputAction.done,
              controller: _controllerPassPhrase,
              onSubmitted: (value) => setState(() {
                if (_controllerUsername.text.isNotEmpty && value.isNotEmpty) {
                  data.add(UserWithComment(_controllerUsername.text, value));
                }
              }),
            ),
          ],
        ),
      ),
    );
  }
}

class UserWithComment {
  final String username;
  final String comment;

  UserWithComment(this.username, this.comment);
}

Flutter 自动将文本字段输入更新到列表视图

Flutter Auto update Textfield input to listview

listview

textfield

flutter