Flutter中使用EditableText组件时上下文菜单不显示问题求助

问题分析 #

你的代码中，EditableText被嵌套在高度固定为40的SizedBox和Stack中，且未设置内边距，导致文本选择的交互区域受限。虽然contextMenuBuilder已被触发（控制台有打印输出），但布局约束异常导致上下文菜单的锚点计算错误，无法在屏幕上正确渲染。

解决方案 #

通过以下两种方式修复，核心是确保EditableText有合理的交互空间，同时优化布局结构：

方案1：移除Stack，用Container直接实现边框（推荐）

将Stack替换为带边框的Container，并给EditableText添加内边距，让文本区域有足够的交互空间：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: HomeScreen()));
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final TextEditingController controller = TextEditingController();
  final FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 40,
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black87, width: 1),
            ),
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: EditableText(
              controller: controller,
              focusNode: focusNode,
              style: TextStyle(color: Colors.black, fontSize: 19),
              cursorColor: Colors.black,
              backgroundCursorColor: Colors.black,
              selectionControls: materialTextSelectionControls,
              contextMenuBuilder: (context, editableTextState) {
                print('================ Triggered ==================');
                return AdaptiveTextSelectionToolbar.buttonItems(
                  anchors: editableTextState.contextMenuAnchors,
                  buttonItems: editableTextState.contextMenuButtonItems,
                );
              },
              enableInteractiveSelection: true,
              selectionColor: Colors.purple.withOpacity(0.3),
            ),
          ),
        ),
      ),
    );
  }
}

方案2：保留Stack，给EditableText添加内边距

如果必须使用Stack结构，只需给EditableText添加内边距，确保文本交互区域不受限：

// 仅修改EditableText部分
EditableText(
  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
  controller: controller,
  focusNode: focusNode,
  style: TextStyle(color: Colors.black, fontSize: 19),
  cursorColor: Colors.black,
  backgroundCursorColor: Colors.black,
  selectionControls: materialTextSelectionControls,
  contextMenuBuilder: (context, editableTextState) {
    print('================ Triggered ==================');
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: editableTextState.contextMenuButtonItems,
    );
  },
  enableInteractiveSelection: true,
  selectionColor: Colors.purple.withOpacity(0.3),
),

说明 #

添加内边距后，文本不再紧贴容器边缘，触摸选择的交互区域恢复正常，上下文菜单的锚点计算也能正确执行，从而正常弹出菜单。方案1的布局结构更简洁，避免了Stack可能带来的层级或约束冲突，是更优选择。

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