如何在Text小部件的動態串列中添加TextField值-Flutter

我有一個帶有添加按鈕的 TextField，還有一個串列。我希望將 TextField 值添加到串列中，并且每個值都應動態顯示在 Text 小部件中。例如，首先：我在 TextField 中輸入“Hello”，然后按 Add 按鈕。Text 小部件應出現在 TextField 的頂部，其值為“Hello”。然后我在 TextField 中輸入“Good”并按下 Add 按鈕。在 TextField 之上，我想要兩個單獨的 Text 小部件，“Hello”和“Good”。這是我的代碼。串列值是正確的，但它不是作為 TextField 頂部的文本小部件出現的。而且代碼在有狀態小部件的構建功能中。

List tags = [];
TextEditingController tagController = TextEditingController();

  void addTag() {
    setState(() {
      dynamicList.add(tagPreview(tagController.text));
      tags.add(tagController.text);
      tagController.clear();
    });
  }

Container(
          child: (tags.isEmpty)? const Center(child: Text(' No Tags Added')) 
          : ListView.builder(
          itemCount: tags.length,
          itemBuilder: (context, index) {
              return Text(tags[index].toString());
          }, ), ),
          TextField(
              controller: tagController,
              decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: "Specify your pets' tags",
              suffixIcon: IconButton(
              icon: Icon(
              Icons.add_circle_outline_sharp,
              color: Color.fromARGB(255, 129, 128, 128),
              size: 30,
              ),
               onPressed: () {
               addTag();
               print(tags);   // tags list output is ['Hello', 'Good']
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              ),

uj5u.com熱心網友回復：

請試試這個。我還實作了提交，如果您按 Enter 鍵，它將創建文本小部件。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> allMessages = [];
  TextEditingController _textEditingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Column(
        children: [
          Expanded(
              child: ListView.builder(
                  itemCount: allMessages.length,
                  itemBuilder: (_, index) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Center(
                          child: Container(
                            margin: EdgeInsets.symmetric(
                                vertical: 5, horizontal: 10),
                            padding: EdgeInsets.symmetric(
                                horizontal: 10, vertical: 7),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                color: Colors.green),
                            child: Text(allMessages[index]),
                          ),
                        ),
                      ],
                    );
                  })),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 20),
            child: Row(
              children: [
                Flexible(
                  child: TextField(
                    onEditingComplete: () {
                      setState(() {
                        allMessages.add(_textEditingController.text);
                        _textEditingController.text = "";
                      });
                    },
                    controller: _textEditingController,
                  ),
                ),
                IconButton(
                    onPressed: () {
                      setState(() {
                        allMessages.add(_textEditingController.text);
                        _textEditingController.text = "";
                      });
                    },
                    icon: Icon(Icons.send))
              ],
            ),
          )
        ],
      ),
    ));
  }
}

標籤：扑 镖 颤振布局 颤振列表视图

上一篇：將引數傳遞給可重用的小部件

下一篇：Flutter3.0中用于空值的空值檢查運算子