无法向子组件传递非空FormState？传递返回null的解决方法

最小可复现代码 #

final GlobalKey<FormState> _formKey = GlobalKey();

class FooPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: BarWidget(_formKey.currentState),
    );
  }
}

// 在另一个库中
class BarWidget extends StatelessWidget {
  final FormState? _formState;
  BarWidget(this._formState);

  @override
  Widget build(BuildContext context) {
    print(_formState); // 输出null 
    return SizedBox.shrink();
  }
}

问题描述：尝试向BarWidget传递FormState，但得到的却是null，推测原因是Form尚未完成渲染。请问获取非空FormState的正确方式是什么？

正确解决方案 #

方案1：子组件通过Form.of(context)获取FormState #

如果BarWidget处于Form的子树范围内，直接在子组件的build方法中调用Form.of(context)即可获取FormState，无需额外传递参数：

class BarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final formState = Form.of(context);
    print(formState); // 此时可获取到非空的FormState
    return SizedBox.shrink();
  }
}

// FooPage无需传递参数
class FooPage extends StatelessWidget {
  final GlobalKey<FormState> _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: BarWidget(),
    );
  }
}

方案2：传递GlobalKey给子组件，按需获取FormState #

如果需要在子组件的非渲染时机（比如按钮点击）操作FormState，直接传递GlobalKey给子组件，在需要的时候访问key.currentState：

class BarWidget extends StatelessWidget {
  final GlobalKey<FormState> formKey;
  BarWidget(this.formKey);

  @override
  Widget build(BuildContext context) {
    // 避免在build阶段直接访问currentState，建议在交互事件中调用
    return ElevatedButton(
      onPressed: () {
        final formState = formKey.currentState;
        print(formState); // 此时Form已完成挂载，能获取到非空值
        formState?.validate();
      },
      child: const Text('验证表单'),
    );
  }
}

class FooPage extends StatelessWidget {
  final GlobalKey<FormState> _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: BarWidget(_formKey),
    );
  }
}

方案3：传递回调函数延迟获取FormState #

如果必须传递FormState的引用，可传递一个返回FormState?的回调，让子组件在需要的时候调用：

class BarWidget extends StatelessWidget {
  final FormState? Function() getFormState;
  BarWidget(this.getFormState);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        final formState = getFormState();
        print(formState);
      },
      child: const Text('获取FormState'),
    );
  }
}

class FooPage extends StatelessWidget {
  final GlobalKey<FormState> _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: BarWidget(() => _formKey.currentState),
    );
  }
}

对临时解决方案的分析 #

你提到的几种临时方案优劣如下：

• 方案1（addPostFrameCallback）：可行但冗余，将无状态组件转为有状态组件增加了复杂度，仅适用于极端特殊场景。
• 方案2（Future/Timer）：不可靠，依赖时间延迟等待组件挂载，不同设备性能差异可能导致依然获取null，属于非规范的hack写法。
• 方案3（build中调用async函数setState）：违反Flutter的build原则，build方法应是纯函数，不能包含异步操作，可能引发不必要的重绘或状态异常。
• 方案4（传递回调）：属于合理方案，和上面推荐的方案3一致，是延迟获取的正确方式。
• 方案5（传递GlobalKey）：属于推荐方案之一，是最直接且可靠的方式，只要不在build阶段立即访问currentState即可。

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