Flutter中showModalBottomSheet内TextField异常问题求助

1. 搞定"No MediaQuery widget ancestor was found"错误 #

这个错误的根源是showModalBottomSheet要求调用它的上下文必须是MaterialApp/WidgetsApp的后代节点上下文。如果直接使用MaterialApp根节点的context（比如在runApp的Widget里直接调用），就会触发这个错误。

解决方式：

• 直接用Scaffold内部的context调用showModalBottomSheet即可，比如在首页StatefulWidget的build方法中，当前获取的context就是合规的；
• 如果悬浮按钮在MaterialApp的直接子组件里，才需要用Builder包裹按钮来获取子context（你测试2的做法方向正确，但问题出在状态管理上）。

2. 解决TextField切换时内容丢失 #

这个问题和弹窗无关，核心是AddTask组件的状态管理逻辑有漏洞，导致组件重建时输入内容被清空。

核心原因 #

如果AddTask是StatelessWidget，用临时变量存储输入值，每次组件重建（比如TextField焦点变化触发重绘），临时变量会被重新初始化，内容自然丢失。即使是StatefulWidget，若不用TextEditingController，仅靠setState存值，也可能因弹窗重绘导致状态丢失。

解决代码 #

把AddTask改成带TextEditingController的StatefulWidget，控制器会独立保存输入内容，不受组件重建影响：

class AddTask extends StatefulWidget {
  final Function(String title, String amount) onSubmit;

  const AddTask({super.key, required this.onSubmit});

  @override
  State<AddTask> createState() => _AddTaskState();
}

class _AddTaskState extends State<AddTask> {
  // 用控制器管理每个输入框的内容
  final _titleController = TextEditingController();
  final _amountController = TextEditingController();

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    _titleController.dispose();
    _amountController.dispose();
    super.dispose();
  }

  void _handleSubmit() {
    final title = _titleController.text.trim();
    final amount = _amountController.text.trim();
    
    // 简单校验，空内容不提交
    if (title.isEmpty || amount.isEmpty) return;

    widget.onSubmit(title, amount);
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    // 适配键盘高度，避免输入框被挡住
    return Padding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom,
        left: 16,
        right: 16,
        top: 16,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          TextField(
            controller: _titleController,
            decoration: const InputDecoration(labelText: 'Title'),
            textInputAction: TextInputAction.next,
          ),
          const SizedBox(height: 12),
          TextField(
            controller: _amountController,
            decoration: const InputDecoration(labelText: 'Amount'),
            keyboardType: TextInputType.number,
            textInputAction: TextInputAction.done,
            onSubmitted: (_) => _handleSubmit(),
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: _handleSubmit,
            child: const Text('Add Task'),
          ),
        ],
      ),
    );
  }
}

调用弹窗的正确姿势 #

加上isScrollControlled: true，适配键盘弹出，避免弹窗重绘异常：

FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 必须加，适配键盘高度
      builder: (ctx) => AddTask(
        onSubmit: (title, amount) {
          // 更新首页状态，把新数据加入列表
          setState(() {
            // 假设首页有tasks列表，这里添加新任务
            tasks.add(Task(title: title, amount: amount));
          });
        },
      ),
    );
  },
  child: const Icon(Icons.add),
)

为什么测试2里用Builder解决了MediaQuery但内容丢失？ #

Builder只是提供了正确的子context，解决了MediaQuery的依赖问题，但AddTask的状态管理没跟上，每次弹窗重绘（比如切换输入框焦点），输入内容就会被重置。核心是要靠TextEditingController来持久化输入状态。

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