Flutter中如何自定义SelectableRegion工具栏？禁用全选及修改样式

一、禁用“SelectAll”选项的最优方案 #

核心思路是自定义TextSelectionControls，继承MaterialTextSelectionControls后重写按钮生成逻辑，针对性过滤掉SelectAll选项，这种方式侵入性最低，完全保留Material风格的其他交互逻辑。

1. 创建自定义选择控件类，重写getToolbarButtons方法，只保留需要的按钮：

class NoSelectAllTextSelectionControls extends MaterialTextSelectionControls {
  @override
  List<Widget> getToolbarButtons(
    BuildContext context,
    TextSelectionDelegate delegate,
    ClipboardStatusNotifier? clipboardStatus,
    Offset? lastSecondaryTapDownPosition,
  ) {
    // 获取默认按钮列表
    final defaultButtons = super.getToolbarButtons(
      context,
      delegate,
      clipboardStatus,
      lastSecondaryTapDownPosition,
    );
    // 过滤掉显示"Select all"的按钮
    return defaultButtons.where((button) {
      if (button is Text) {
        return button.data != 'Select all';
      }
      return true;
    }).toList();
  }
}

2. 在SelectableRegion中使用这个自定义控件：

SelectableRegion(
  selectionControls: NoSelectAllTextSelectionControls(),
  child: const Text('这里是可选中的文本内容'),
)

二、修改工具栏选项的文本颜色 #

有两种实用方法，按需选择：

方法1：自定义控件精确控制 #

在刚才的自定义选择控件中，重写buildTextSelectionToolbarItem方法，直接指定文本样式：

class CustomStyleTextSelectionControls extends MaterialTextSelectionControls {
  // 如果需要禁用SelectAll，先实现上面的getToolbarButtons逻辑

  @override
  Widget buildTextSelectionToolbarItem(
    BuildContext context,
    TextSelectionToolbarItem item,
  ) {
    return Text(
      item.label,
      style: const TextStyle(
        color: Colors.red, // 设置目标文本颜色
        fontSize: 14,
      ),
    );
  }
}

方法2：全局Theme统一配置 #

如果想要整个App的文本选择工具栏用统一样式，直接在ThemeData中配置：

MaterialApp(
  theme: ThemeData(
    textSelectionTheme: const TextSelectionThemeData(
      toolbarTextStyle: TextStyle(
        color: Colors.blue, // 全局设置工具栏文本颜色
        fontWeight: FontWeight.w500,
      ),
    ),
  ),
  home: YourHomePage(),
)

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