Flutter中TextFormField光标气泡滚动时重叠AppBar及其他组件问题求助

问题根因 #

Flutter的文本选择工具栏（含光标选中气泡、复制粘贴菜单）是挂载在全局Overlay上的，默认不会跟随子滚动容器的边界裁剪，当输入框随着滚动移出当前可视区域时，挂载在全局的气泡并不会同步隐藏/裁剪，就会出现遮挡上层组件的问题。

解决方案（按改造成本从低到高排序） #

方案1：禁用文本选择交互（业务允许的前提下首选） #

直接给所有TextFormField添加enableInteractiveSelection: false属性即可，该属性会关闭文本选中、复制粘贴、光标气泡等交互功能，从根源避免气泡生成。
修改后的TextFormField示例：

TextFormField(
  decoration: const InputDecoration(),
  enableInteractiveSelection: false,
)

方案2：滚动时自动取消选中状态 #

给承载输入框的滚动组件添加滚动监听，只要发生滚动就自动取消当前输入框的选中状态，气泡会跟随选中状态一起消失。
改造步骤：

1. 在State类中声明ScrollController

final ScrollController _scrollController = ScrollController();

2. 在initState中绑定滚动监听

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    // 滚动时取消当前输入框的焦点，自动关闭选择气泡
    FocusManager.instance.primaryFocus?.unfocus();
  });
}

3. 在dispose中销毁控制器

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

4. 给嵌套输入框的ListView绑定控制器

Expanded(
  child: Scrollbar(
    child: ListView(
      controller: _scrollController, // 绑定控制器
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      // 其余原有代码保持不变
    ),
  ),
)

方案3：自定义文本选择菜单限制显示范围 #

如果需要保留文本选择功能，可以通过contextMenuBuilder自定义菜单的渲染逻辑，计算时判断菜单坐标是否超出当前滚动容器的可视区域，超出则自动隐藏，改造代码如下：
给TextFormField添加contextMenuBuilder属性：

TextFormField(
  decoration: const InputDecoration(),
  contextMenuBuilder: (context, editableTextState) {
    final renderBox = context.findRenderObject() as RenderBox;
    final widgetY = renderBox.localToGlobal(Offset.zero).dy;
    final viewportHeight = Scrollable.of(context).position.viewportDimension;
    // 输入框滚出可视区域时不渲染选择菜单
    if(widgetY < 0 || widgetY + renderBox.size.height > viewportHeight) {
      return const SizedBox.shrink();
    }
    // 可视区域内返回默认菜单
    return AdaptiveTextSelectionToolbar.editableText(
      editableTextState: editableTextState,
    );
  },
)

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