Flutter使用flutter_form_builder点击表单组件出现意外滚动问题

问题复现效果 #

问题原因 #

1. 代码中自定义的原生Checkbox显式配置了autofocus: true，Flutter中带有该属性的组件在状态变更触发重绘时会主动请求焦点，而SingleChildScrollView默认开启了自动滚动到焦点节点的行为，会直接滚动到对应组件位置。
2. flutter_form_builder的表单组件（包括Checkbox、Dropdown等）默认在值变更、触发表单状态更新时，会主动请求获取焦点，叠加SingleChildScrollView的自动滚动逻辑，就会出现点击后意外跳转的问题。
3. 当前组件嵌套顺序SingleChildScrollView -> FormBuilder -> Column不符合常规使用规范，表单状态更新时会触发滚动容器重绘，会放大滚动异常的概率。

解决方案 #

移除多余的autofocus配置 #

删除原生Checkbox中的autofocus: true属性，避免组件主动请求焦点：

Checkbox(
  value: test, 
  onChanged: (bool? value) {
    setState(() {
      test = !test;
    });
  },
  // 移除该行配置：autofocus: true
),

禁用SingleChildScrollView的自动滚动到焦点逻辑 #

给SingleChildScrollView添加autoScrollToFocusedNode: false属性，关闭默认的滚动到焦点节点行为：

SingleChildScrollView(
  autoScrollToFocusedNode: false, // 新增该行配置
  child: FormBuilder(
    // 原有配置保持不变
  )
)

调整组件嵌套顺序（可选优化） #

将嵌套顺序调整为FormBuilder -> SingleChildScrollView -> Column，符合表单组件的常规使用规范，避免不必要的滚动容器重绘：

return FormBuilder(
  key: _formKey,
  autovalidateMode: AutovalidateMode.disabled,
  onWillPop: () async {
    return true;
  },
  skipDisabled: false,
  child: SingleChildScrollView(
    autoScrollToFocusedNode: false,
    child: Column(
      // 原有子组件保持不变
    ),
  ),
);

强制禁用FormBuilder组件的autofocus #

如果以上操作后问题仍存在，给所有用到的FormBuilder表单组件显式设置autofocus: false：

FormBuilderCheckbox(
  name: 'damageLocalized',
  initialValue: false,
  title: const Text('Form Builder Widget'),
  autofocus: false, // 新增该行配置
),
// 其他用到的FormBuilderDropdown等组件也同步添加该配置

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