Flutter使用setState实现TextFormField输入内容动态添加与弹窗关联问题

你现有代码的addtasks方法存在错误，setState仅用于更新状态变量，不能包裹组件触发UI更新，以下是可直接运行的修正方案，且兼容后续迭代为列表的需求：

1. 输入内容同步到上方展示区域 #

首先在页面State类中定义状态变量，后续要扩展为任务列表时直接修改变量类型即可，不需要重构核心逻辑：

// 存储展示的内容，后续要改列表的话直接替换为 List<String> _taskList = []
String _showContent = '';
final TextEditingController textController = TextEditingController();

修正后的表单构建代码，输入提交时同步更新展示内容：

Widget formMaker() {
  return TextFormField(
    controller: textController,
    keyboardType: TextInputType.text,
    onFieldSubmitted: (String value) {
      // 需要实时同步输入内容的话，把这段逻辑移到onChanged回调中即可
      setState(() {
        _showContent = value;
        // 后续迭代为列表的话替换为下面的代码
        // if(value.isNotEmpty) _taskList.add(value);
      });
      // 提交后清空输入框
      textController.clear();
    },
    decoration: const InputDecoration(
      labelText: '添加任务...',
      prefixIcon: Icon(Icons.add),
      border: OutlineInputBorder(),
    ),
  );
}

上方展示区域直接调用状态变量渲染即可，不需要额外封装方法：

// 上方文本展示区域代码
Text(_showContent.isEmpty ? '暂无任务' : _showContent)
// 后续迭代为列表的话替换为ListView构建：
// ListView.builder(
//   itemCount: _taskList.length,
//   itemBuilder: (context, index) => Text(_taskList[index]),
// )

2. 底部弹窗回调关联主页面逻辑 #

弹窗内的操作直接调用主页面的状态更新方法即可，操作前先关闭弹窗避免内存泄漏：

floatingActionButton: FloatingActionButton(
  child: const Icon(Icons.add),
  backgroundColor: Colors.red,
  hoverColor: Colors.white,
  splashColor: Colors.white,
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return Wrap(
          children: [
            InkWell(
              child: const ListTile(
                leading: Icon(Icons.edit),
                title: Text('添加任务'),
              ),
              onTap: () {
                // 先关闭弹窗
                Navigator.pop(context);
                // 执行添加任务逻辑
                setState(() {
                  if(textController.text.isNotEmpty) {
                    _showContent = textController.text;
                    // 列表迭代版：_taskList.add(textController.text);
                    textController.clear();
                  }
                });
              },
            ),
            ListTile(
              leading: const Icon(Icons.share),
              title: const Text('分享'),
              onTap: () {
                Navigator.pop(context);
                // 此处添加分享逻辑
              },
            ),
            ListTile(
              leading: const Icon(Icons.link),
              title: const Text('获取链接'),
              onTap: () {
                Navigator.pop(context);
                // 此处添加获取链接逻辑
              },
            ),
            ListTile(
              leading: const Icon(Icons.remove_outlined),
              title: const Text('删除'),
              onTap: () {
                Navigator.pop(context);
                // 执行清空逻辑
                setState(() {
                  _showContent = '';
                  // 列表迭代版：_taskList.clear();
                });
              },
            ),
          ],
        );
      }
    );
  },
),

当前界面UI效果如下：

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