Flutter如何禁用列表中所有下拉输入组件的自动获取焦点效果

问题场景 #

业务中基于封装的下拉组件动态渲染对应数据量的下拉菜单，组件内置强制自动获取焦点的默认配置，无法直接修改组件内部源码，需要实现所有下拉项默认不自动抢占焦点的效果，且不影响用户手动点击下拉的正常交互。

实现方案 #

方案1：自定义FocusNode拦截初次自动聚焦请求（无侵入，推荐） #

组件自动获取焦点的本质是在初始化阶段调用focusNode.requestFocus()，我们可以给传入下拉组件的FocusNode添加状态标记和监听，仅拦截组件初始化阶段自动触发的焦点请求，不拦截用户手动点击触发的正常焦点获取。
修改后的代码实现如下：

Widget _buildAdditionFields(SimpleOrderStates state) {
  if (state.isAdditionsProgress) {
    return const Padding(
      padding: EdgeInsets.all(Margins.small),
      child: PlatformProgressIndicator(),
    );
  } else {
    var name = state.additionEntity?.name ?? '';
    var options = state.additionEntity?.getAddition(0)?.dropdownItems;

    var list = state.additionEntity?.selectedVariants
      .mapIndexed(
          (index, addition) {
            // 标记是否已拦截初始化阶段的自动聚焦
            bool isAutoFocusBlocked = false;
            final focusNode = FocusNode();
            // 监听焦点变化，拦截初次自动聚焦
            focusNode.addListener(() {
              if (!isAutoFocusBlocked && focusNode.hasFocus) {
                isAutoFocusBlocked = true;
                // 立刻取消自动获取的焦点
                focusNode.unfocus();
              }
            });

            return Container(
              padding: const EdgeInsets.all(Margins.little),
              child: _buildDropdownField(
                text: addition!["aditionVariontName"],
                enabled: true,
                progress: false,
                dropdownOptions: [],
                // 传入处理过拦截逻辑的FocusNode
                focusNode: focusNode,
                applySelected: true,
                action: SvgPicture.asset(Img.dropdownArrow),
                labelText: addition!["additionName"],
                dropdownItemSelected: (item) {
                  BlocProvider.of<SimpleOrderBloc>(context).add(
                      SimpleOrderDropdownMenuAdditionItemSelectedEvent(item));
                },
                textChanged: (text) {}
            ),
          );
        }
     ).toList();

    return Column(
      children: list ?? [],
    );
  }
}

方案2：全局包裹后统一清除初始焦点 #

如果不需要精准控制单个下拉项的焦点逻辑，可以在整个下拉列表渲染完成后，统一清除当前页面的焦点，自动抢焦点的行为会被直接覆盖。
只需要在Column外层包裹Builder，在组件首次帧渲染完成后执行unfocus操作：

return Builder(
  builder: (context) {
    // 首帧渲染完成后清除自动获取的焦点
    WidgetsBinding.instance.addPostFrameCallback((_) {
      FocusScope.of(context).unfocus();
    });
    return Column(
      children: list ?? [],
    );
  }
);

注意：该方案实现更简单，但如果页面上有其他需要默认保持焦点的输入组件，会被一并清除焦点，适合页面仅展示下拉列表、无其他默认聚焦输入控件的场景。

注意事项 #

• 不要直接使用ExcludeFocus或者给FocusScope设置canRequestFocus: false包裹列表，这两种方式会完全禁用子组件的焦点获取能力，导致用户手动点击下拉菜单也无法正常触发交互。
• 方案1的拦截标记只会在组件首次自动获取焦点时生效，后续用户手动点击触发的焦点请求不会被拦截，不影响组件正常使用。

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