Flutter如何将TextField输入值动态添加为列表Text组件展示

你的代码数据正常但界面不渲染，核心是两个问题：

• ListView.builder直接放在Column组件内时，默认会尝试获取最大可用高度，而Column本身是无限高度布局，会触发布局约束错误，导致列表根本无法绘制，这也是控制台虽然能打印出tags数据，但界面没反应的核心原因
• addTag方法里的dynamicList.add(tagPreview(tagController.text))是无效代码，这两个变量你没有做全局定义，运行时会抛出未声明变量的异常，打断渲染流程

1. 给ListView.builder添加shrinkWrap: true属性，让列表高度自适应所有子项的总高度，不再尝试撑满父组件的无限空间；可选添加physics: const NeverScrollableScrollPhysics()禁用列表自身滚动，把滚动交互交给外层页面
2. 删除addTag方法里和dynamicList相关的无效代码，避免运行时报错
3. 把tags列表、tagController这些状态变量放在State类的顶层，不要写在build方法里，否则每次界面重构都会把列表重置为空
4. 补充空内容判断，避免用户输入空字符串也生成标签；补充控制器的dispose逻辑，避免内存泄漏

import 'package:flutter/material.dart';

class TagInputDemo extends StatefulWidget {
  const TagInputDemo({super.key});

  @override
  State<TagInputDemo> createState() => _TagInputDemoState();
}

class _TagInputDemoState extends State<TagInputDemo> {
  List tags = [];
  final TextEditingController tagController = TextEditingController();

  void addTag() {
    final inputText = tagController.text.trim();
    if (inputText.isEmpty) return;
    setState(() {
      tags.add(inputText);
      tagController.clear();
    });
  }

  @override
  void dispose() {
    tagController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("标签输入 demo")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 标签展示区域
            Container(
              width: double.infinity,
              constraints: const BoxConstraints(minHeight: 120),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey.shade300),
                borderRadius: BorderRadius.circular(4),
              ),
              padding: const EdgeInsets.all(8),
              child: tags.isEmpty
                  ? const Center(child: Text('No Tags Added'))
                  : ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: tags.length,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.symmetric(vertical: 4),
                          child: Text(tags[index].toString()),
                        );
                      },
                    ),
            ),
            const SizedBox(height: 16),
            // 标签输入框
            TextField(
              controller: tagController,
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                labelText: "Specify your pets' tags",
                suffixIcon: IconButton(
                  icon: const Icon(
                    Icons.add_circle_outline_sharp,
                    color: Color.fromARGB(255, 129, 128, 128),
                    size: 30,
                  ),
                  onPressed: addTag,
                ),
              ),
              onSubmitted: (_) => addTag(),
            ),
          ],
        ),
      ),
    );
  }
}

修复后输入内容点击添加按钮，标签会实时出现在输入框上方的容器内，多次添加会按顺序纵向排列，控制台打印的tags数据和界面展示完全一致。

内容的提问来源于stack exchange，提问作者Tindona