Flutter中Stack嵌套Offstage组件的TextFormField焦点异常问题

嘿，这个问题我之前做项目时也踩过类似的坑，其实根源在于Stack的渲染层级特性，再加上你每个Offstage里都嵌套了MaterialApp导致的焦点上下文冲突，咱们一步步拆解：

问题原因分析 #

1. Stack的堆叠逻辑：Stack里的子组件是按添加顺序堆叠的，后面的组件会覆盖在前面的组件之上（即使前面的Offstage设置为offstage: false）。
2. MaterialApp的隔离特性：每个MaterialApp都会创建自己独立的FocusScope（焦点作用域）和Navigator上下文。当你显示前面的Offstage组件时，它的MaterialApp的FocusScope其实是被顶层（后面添加的）MaterialApp的FocusScope覆盖了——Flutter的焦点系统会优先响应最上层的FocusScope，所以底层的TextFormField自然拿不到焦点。
3. 为什么移到第三个位置就正常：当你把第一个Offstage移到Stack的最后（顶层），它的MaterialApp的FocusScope就变成了最上层的，焦点系统能正常识别并响应它的输入框焦点请求。

解决方案 #

方案1：移除Offstage内的MaterialApp（优先推荐） #

MaterialApp设计为整个应用的根组件，每个页面/模块共享同一个MaterialApp上下文就好，没必要给每个Offstage单独套一个。这样所有Form和TextFormField都会处于同一个FocusScope下，不管Stack里哪个Offstage显示，输入框都能正常获取焦点。

修改后的代码示例：

MaterialApp(
  home: Scaffold(
    body: Stack(
      children: [
        // 第一个表单（原第一个Offstage）
        Offstage(
          offstage: currentIndex != 0,
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Form(
              child: TextFormField(
                decoration: InputDecoration(labelText: "表单1输入框"),
                autofocus: currentIndex == 0, // 可选：切换时自动获取焦点
              ),
            ),
          ),
        ),
        // 第二个表单（原第二个Offstage）
        Offstage(
          offstage: currentIndex != 1,
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Form(
              child: TextFormField(
                decoration: InputDecoration(labelText: "表单2输入框"),
                autofocus: currentIndex == 1,
              ),
            ),
          ),
        ),
        // 第三个表单（原第三个Offstage）
        Offstage(
          offstage: currentIndex != 2,
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Form(
              child: TextFormField(
                decoration: InputDecoration(labelText: "表单3输入框"),
                autofocus: currentIndex == 2,
              ),
            ),
          ),
        ),
      ],
    ),
  ),
)

方案2：手动管理每个MaterialApp的FocusScope（迫不得已时用） #

如果你的业务场景必须给每个Offstage单独使用MaterialApp（比如完全隔离的路由或主题），那可以给每个MaterialApp绑定独立的FocusScopeNode，切换Offstage时主动请求对应节点的焦点。

代码示例：

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

  @override
  State<MyFormPage> createState() => _MyFormPageState();
}

class _MyFormPageState extends State<MyFormPage> {
  int currentIndex = 0;
  // 为每个MaterialApp创建独立的焦点作用域节点
  final List<FocusScopeNode> _focusNodes = List.generate(3, (_) => FocusScopeNode());

  @override
  void dispose() {
    // 记得销毁节点，避免内存泄漏
    for (var node in _focusNodes) {
      node.dispose();
    }
    super.dispose();
  }

  // 切换表单的方法
  void _switchForm(int index) {
    setState(() {
      currentIndex = index;
    });
    // 主动请求对应表单的焦点作用域
    _focusNodes[index].requestFocus();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Offstage(
          offstage: currentIndex != 0,
          child: MaterialApp(
            home: FocusScope(
              node: _focusNodes[0],
              child: Scaffold(
                body: Padding(
                  padding: EdgeInsets.all(16),
                  child: Form(
                    child: TextFormField(
                      decoration: InputDecoration(labelText: "表单1输入框"),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
        Offstage(
          offstage: currentIndex != 1,
          child: MaterialApp(
            home: FocusScope(
              node: _focusNodes[1],
              child: Scaffold(
                body: Padding(
                  padding: EdgeInsets.all(16),
                  child: Form(
                    child: TextFormField(
                      decoration: InputDecoration(labelText: "表单2输入框"),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
        Offstage(
          offstage: currentIndex != 2,
          child: MaterialApp(
            home: FocusScope(
              node: _focusNodes[2],
              child: Scaffold(
                body: Padding(
                  padding: EdgeInsets.all(16),
                  child: Form(
                    child: TextFormField(
                      decoration: InputDecoration(labelText: "表单3输入框"),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

总结 #

优先选方案1，因为多个MaterialApp会带来上下文隔离、路由管理、资源消耗等额外问题，共享一个根MaterialApp是Flutter的最佳实践。如果确实需要隔离，再用方案2手动管理焦点作用域。

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