Flutter中TextFormField上下文菜单不显示问题排查

问题原因 #

1. 你自定义了contextMenuBuilder但未适配当前主题的颜色样式，导致菜单文字/背景色与主题冲突（比如深色主题下文字过浅无法看清）。
2. 自定义ThemeData中缺少文本选择相关主题配置，Material3下文本选择工具栏的样式依赖textSelectionTheme和textSelectionToolbarTheme，未配置时会出现样式异常。

解决方案 #

方案1：完善ThemeData的文本选择主题配置 #

在ThemeDataManager的darkTheme和lightTheme中添加文本选择相关的主题属性，确保工具栏样式适配当前主题：

修改theme_data_manager.dart：

// 深色主题中添加
ThemeData get darkTheme {
  return ThemeData(
    // ... 原有配置
    textSelectionTheme: TextSelectionThemeData(
      selectionColor: ColorManager.activeColor.withOpacity(0.3),
      cursorColor: ColorManager.activeColor,
      selectionHandleColor: ColorManager.activeColor,
    ),
    textSelectionToolbarTheme: TextSelectionToolbarThemeData(
      backgroundColor: ColorManager.darkSecondaryColor,
      textStyle: TextStyle(color: ColorManager.lightPrimaryColor),
    ),
  );
}

// 浅色主题中添加
ThemeData get lightTheme {
  return ThemeData(
    // ... 原有配置
    textSelectionTheme: TextSelectionThemeData(
      selectionColor: ColorManager.activeColor.withOpacity(0.3),
      cursorColor: ColorManager.activeColor,
      selectionHandleColor: ColorManager.activeColor,
    ),
    textSelectionToolbarTheme: TextSelectionToolbarThemeData(
      backgroundColor: ColorManager.lightSecondaryColor,
      textStyle: TextStyle(color: ColorManager.darkPrimaryColor),
    ),
  );
}

方案2：优化自定义contextMenuBuilder的样式适配 #

如果需要保留自定义的菜单按钮集合，可在contextMenuBuilder中复用当前主题的样式，避免硬编码颜色冲突：

修改search_text_form_field.dart中的contextMenuBuilder：

contextMenuBuilder: (context, editableTextState) {
  final theme = Theme.of(context);
  return AdaptiveTextSelectionToolbar.buttonItems(
    anchors: editableTextState.contextMenuAnchors,
    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,
      ),
    ],
    // 适配主题的工具栏容器样式
    toolbarBuilder: (context, children) {
      return Container(
        decoration: BoxDecoration(
          color: theme.textSelectionToolbarTheme.backgroundColor,
          borderRadius: BorderRadius.circular(8),
        ),
        padding: const EdgeInsets.symmetric(vertical: 4),
        child: Column(mainAxisSize: MainAxisSize.min, children: children),
      );
    },
  );
},

额外建议 #

如果不需要自定义菜单按钮，直接移除contextMenuBuilder配置，Flutter默认的上下文菜单会自动适配当前主题样式。

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