Flutter中TextFormField工具栏被AppBar遮挡的解决方法咨询

问题根源 #

你的布局存在多层Scaffold嵌套：Root组件已经是包含全局AppBar的顶层Scaffold，而SearchPlaces页面又额外嵌套了一层Scaffold和Overlay。文本选择的上下文菜单默认会插入到当前Widget所在的Overlay层级中，这个层级在Root的AppBar之下，因此出现了被遮挡的情况。

解决方案1：移除冗余的Scaffold和Overlay（推荐） #

最直接的修复方式是去掉SearchPlaces里的Scaffold和Overlay，直接返回内容组件——因为Root已经提供了完整的顶层Scaffold结构：

修改search_places.dart：

class SearchPlaces extends StatefulWidget {
  const SearchPlaces({super.key});

  @override
  State<SearchPlaces> createState() => _SearchPlacesState();
}

class _SearchPlacesState extends State<SearchPlaces> with TextFormFieldValidationMixin {
  @override
  void initState() {
    super.initState();
    searchController = TextEditingController();
  }

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

  @override
  Widget build(BuildContext context) {
    final places = List.generate(20, (index) => "Place $index");

    // 直接返回核心布局，无需嵌套Scaffold和Overlay
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SearchTextFormField(controller: searchController),
        Expanded(
          flex: 6,
          child: ListView.builder(
            itemCount: places.length,
            itemBuilder: (context, index) => ListTile(
              title: Text(places[index]),
            ),
          ),
        ),
      ],
    );
  }
}

解决方案2：自定义上下文菜单锚点（需保留Overlay时使用） #

如果业务逻辑必须保留Overlay，可以手动调整上下文菜单的锚点位置，避开AppBar的区域：

修改search_text_form_field.dart中的contextMenuBuilder：

contextMenuBuilder: (context, editableTextState) {
  // 获取系统默认AppBar高度，也可根据你的自定义AppBar高度调整
  final appBarHeight = AppBar().preferredSize.height;
  // 向下偏移锚点，避开AppBar区域
  final adjustedAnchors = ContextMenuAnchors(
    primaryAnchor: editableTextState.contextMenuAnchors.primaryAnchor.translate(Offset(0, appBarHeight)),
    secondaryAnchor: editableTextState.contextMenuAnchors.secondaryAnchor.translate(Offset(0, appBarHeight)),
  );

  return AdaptiveTextSelectionToolbar.buttonItems(
    anchors: adjustedAnchors,
    buttonItems: <ContextMenuButtonItem>[
      ContextMenuButtonItem(
        onPressed: () => editableTextState.copySelection(SelectionChangedCause.toolbar),
        type: ContextMenuButtonType.copy,
      ),
      ContextMenuButtonItem(
        onPressed: () => editableTextState.selectAll(SelectionChangedCause.toolbar),
        type: ContextMenuButtonType.selectAll,
      ),
      ContextMenuButtonItem(
        onPressed: () => editableTextState.cutSelection(SelectionChangedCause.toolbar),
        type: ContextMenuButtonType.cut,
      ),
      ContextMenuButtonItem(
        onPressed: () => editableTextState.pasteText(SelectionChangedCause.toolbar),
        type: ContextMenuButtonType.paste,
      ),
    ],
  );
},

额外提示 #

• 尽量避免多层Scaffold嵌套，这会导致布局层级混乱、状态管理复杂，还可能引发各类视觉异常。
• Root的body已经添加了全局padding，注意不要在子页面重复添加冗余padding，避免布局偏移。

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