如何正确为Container的height属性编写条件表达式解决空值报错
报错原因
你代码里用!空断言运算符强制认定_key.currentState一定非空,但Flutter组件首次build渲染时,绑定在Form组件上的GlobalKey还没完成State挂载,此时_key.currentState值为null,空断言被触发就会抛出Null check operator used on a null value错误。
另外直接在Container的height属性赋值位置调用validate()本身也不合理:build方法会在组件生命周期内高频执行,直接在这里调用表单校验方法会触发不必要的表单重绘,甚至引发循环渲染问题。
正确实现方案
方案1(推荐):单独维护高度状态,交互时触发校验更新
- 先在组件State类里定义容器高度的初始状态,默认给未校验场景的高度值
- 单独封装表单校验逻辑,取currentState时先判空,确认非空后再执行校验,通过setState更新高度
- 将校验逻辑放在用户交互回调中触发(比如提交按钮点击、输入框内容变化时),不要直接写在build方法里
示例代码:
// 组件State内定义状态 final GlobalKey<FormState> _key = GlobalKey<FormState>(); double _containerHeight = 480; // 初始默认高度 // 封装校验方法 void _updateContainerHeightByFormStatus() { final formState = _key.currentState; // 先判空再操作,从根源避免空异常 if (formState == null) return; final isFormValid = formState.validate(); setState(() { _containerHeight = isFormValid ? 417 : 480; }); } @override Widget build(BuildContext context) { return Column( children: [ Form( key: _key, child: Column( children: [ // 表单项... TextFormField( // 输入变化时触发校验更新高度 onChanged: (value) => _updateContainerHeightByFormStatus(), validator: (value) { // 校验逻辑... }, ) ], ), ), // 动态高度容器 Container( height: _containerHeight, // 其他属性... ), ElevatedButton( onPressed: () { // 提交时也可触发校验更新 _updateContainerHeightByFormStatus(); }, child: const Text('提交'), ) ], ); }
方案2(临时修复空报错,不推荐长期使用)
如果一定要在build阶段直接写判断逻辑,去掉空断言,改用可选访问运算符加兜底判断,避免空异常:
Container( // currentState为null时?.返回null,null == true为false,自动走默认高度480 height: _key.currentState?.validate() == true ? 417 : 480, )
注意:这种写法依然存在build阶段直接触发表单校验的性能问题,仅适合快速验证场景。
注意事项
- 所有通过GlobalKey取currentState的场景,禁止直接使用
!空断言,必须先做非空判断,组件未挂载、已卸载时currentState都会返回null - 表单校验方法
validate()不要直接写在build方法的属性赋值逻辑中,会导致不必要的性能损耗 - 涉及UI属性更新的逻辑,要通过setState触发状态变更,由Flutter框架自动完成重绘
内容的提问来源于stack exchange,提问作者Edward Philip Guarin
相关产品推荐
相关产品推荐

