Flutter点击ElevatedButton动态向ListView添加自定义Text Widget方法咨询

这个需求需要基于StatefulWidget实现动态状态更新，具体操作如下：

核心思路 #

• 用一个字符串列表维护所有Text组件的展示内容
• 点击按钮时触发内容输入逻辑，将新内容插入列表后调用setState刷新UI
• ListView的子组件直接通过遍历字符串列表生成

完整可运行代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("动态添加ListView项")),
        body: const AddableListViewPage(),
      ),
    );
  }
}

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

  @override
  State<AddableListViewPage> createState() => _AddableListViewPageState();
}

class _AddableListViewPageState extends State<AddableListViewPage> {
  // 存储所有Text要展示的内容
  final List<String> _textList = [];
  // 输入框控制器
  final TextEditingController _inputController = TextEditingController();

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

  // 弹出输入对话框
  void _showInputDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text("输入自定义内容"),
        content: TextField(
          controller: _inputController,
          decoration: const InputDecoration(hintText: "请输入要展示的文字"),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text("取消"),
          ),
          TextButton(
            onPressed: () {
              if (_inputController.text.trim().isNotEmpty) {
                setState(() {
                  _textList.add(_inputController.text.trim());
                });
                _inputController.clear();
                Navigator.pop(context);
              }
            },
            child: const Text("确认添加"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 原ListView组件改造
        Expanded(
          child: ListView(
            children: _textList.map((content) => Text(content)).toList(),
          ),
        ),
        // 原按钮组件改造
        ElevatedButton(
          onPressed: _showInputDialog,
          child: const Text("Add Item"),
        ),
        const SizedBox(height: 20)
      ],
    );
  }
}

关键改动说明 #

• 原来的静态ListView子项被替换为_textList.map((content) => Text(content)).toList()，实现列表内容和状态绑定
• 按钮的onPressed回调新增了弹出输入框、更新列表状态的逻辑，每次确认添加后都会触发UI刷新
• 外层加了Expanded包裹ListView，避免布局溢出报错

小提示：如果列表预期会超过10~20项，建议把ListView替换为ListView.builder，根据_textList.length生成子项，滚动性能会更好。

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