Flutter开发：点击按钮后如何创建显示用户输入内容的新按钮？

要实现点击OK后创建新的可编辑按钮，核心是用列表存储所有新增项的数据，而非单个变量覆盖原有内容。具体实现步骤如下：

1. 定义数据模型 #

创建一个类来保存每个按钮的文本和选择的数值，方便后续管理与修改：

class ItemData {
  String text;
  int value;

  ItemData({required this.text, required this.value});
}

2. 初始化列表存储项 #

在你的State类中添加列表变量，用于保存所有新增按钮的数据：

List<ItemData> _items = [];

3. 修改_addItem方法 #

点击OK时，将用户输入的文本和选择的数值添加到列表中，而非覆盖单个变量：

Future<void> _addItem(BuildContext context) async {
  // 打开弹窗前重置临时输入状态
  _textController.clear();
  setState(() {
    _currentValue = 0;
  });

  return showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('Example'),
        content: Row(
          children: [
            SizedBox(
              width: 150,
              child: TextField(
                controller: _textController,
                decoration: const InputDecoration(hintText: "Example"),
              ),
            ),
            NumberPicker(
              value: _currentValue,
              minValue: 0,
              maxValue: 100,
              onChanged: (value) => setState(() => _currentValue = value),
            ),
          ],
        ),
        actions: <Widget>[
          ElevatedButton(
            child: const Text('CANCEL'),
            onPressed: () => Navigator.pop(context),
          ),
          ElevatedButton(
            child: const Text('OK'),
            onPressed: () {
              if (_textController.text.isNotEmpty) {
                // 将新项添加到列表
                setState(() {
                  _items.add(ItemData(
                    text: _textController.text,
                    value: _currentValue,
                  ));
                  Navigator.pop(context);
                });
              }
            },
          ),
        ],
      );
    },
  );
}

4. 构建动态按钮列表 #

在build方法中遍历_items列表，生成对应的可编辑按钮（点击按钮可弹出弹窗修改当前项）：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Dynamic Buttons')),
    body: Column(
      children: [
        // 新增按钮
        ElevatedIconButton(
          icon: const Icon(Icons.add),
          label: const Text('Add Item'),
          onPressed: () => _addItem(context),
        ),
        // 动态生成的按钮列表
        Expanded(
          child: ListView.builder(
            itemCount: _items.length,
            itemBuilder: (context, index) {
              final item = _items[index];
              return ElevatedButton(
                onPressed: () => _editItem(context, index), // 绑定编辑功能
                child: Text(item.text),
              );
            },
          ),
        ),
      ],
    ),
  );
}

5. 实现编辑功能（可选） #

如果需要修改已创建的按钮，添加_editItem方法复用弹窗逻辑：

Future<void> _editItem(BuildContext context, int index) async {
  final item = _items[index];
  // 打开弹窗时填充原有数据
  _textController.text = item.text;
  setState(() {
    _currentValue = item.value;
  });

  return showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('Edit Item'),
        content: Row(
          children: [
            SizedBox(
              width: 150,
              child: TextField(
                controller: _textController,
                decoration: const InputDecoration(hintText: "Example"),
              ),
            ),
            NumberPicker(
              value: _currentValue,
              minValue: 0,
              maxValue: 100,
              onChanged: (value) => setState(() => _currentValue = value),
            ),
          ],
        ),
        actions: <Widget>[
          ElevatedButton(
            child: const Text('CANCEL'),
            onPressed: () => Navigator.pop(context),
          ),
          ElevatedButton(
            child: const Text('SAVE'),
            onPressed: () {
              if (_textController.text.isNotEmpty) {
                setState(() {
                  _items[index] = ItemData(
                    text: _textController.text,
                    value: _currentValue,
                  );
                  Navigator.pop(context);
                });
              }
            },
          ),
        ],
      );
    },
  );
}

关键修改说明 #

• 用List<ItemData>存储所有新增项，避免单个变量覆盖问题
• 弹窗提交时向列表添加新数据，触发setState更新UI
• 通过ListView.builder动态生成按钮，支持大量项的高效渲染
• 编辑功能复用弹窗逻辑，直接修改列表中对应项的数据

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