flutter开发实战-自定义长按TextField输入框剪切、复制、选择全部菜单AdaptiveTextSelectionToolba样式UI效果

原创最新推荐文章于 2026-09-07 13:29:44 发布 4.4k 阅读 AI写同款

BruceGwo

码龄16年墨衍会员 · AI 创作全网分发

549粉丝278篇原创

关注

flutter 桌面应用之右键菜单 flutter 桌面应用之右键菜单。阅读详情

AI摘要

本文介绍了如何在Flutter中自定义TextField的长按功能，通过继承AdaptiveTextSelectionToolbar并重写contextMenuBuilder，实现中文“复制、粘贴”等菜单样式，以及具体代码实现步骤。

flutter开发实战-自定义长按TextField输入框剪切、复制、选择全部菜单样式UI效果

在开发过程中，需要长按TextField输入框cut、copy设置为中文“复制、粘贴”，我首先查看了TextField中的源码，看到了ToolbarOptions、AdaptiveTextSelectionToolbar，这时候我们可以在剪切、复制、选择全部菜单样式UI效果上显示icon的按钮了。

在这里插入图片描述

一、TextField源码中的代码contextMenuBuilder

我这里在中TextField中的源码，看到了ToolbarOptions、AdaptiveTextSelectionToolbar，可以继承AdaptiveTextSelectionToolbar来实现更改剪切、复制、选择全部菜单样式效果

将自定义的AdaptiveTextSelectionToolbar，设置到contextMenuBuilder即可。

TextField源码一段

  /// {@macro flutter.widgets.EditableText.contextMenuBuilder}
  ///
  /// If not provided, will build a default menu based on the platform.
  ///
  /// See also:
  ///
  ///  * [AdaptiveTextSelectionToolbar], which is built by default.
  final EditableTextContextMenuBuilder? contextMenuBuilder;

  static Widget _defaultContextMenuBuilder(BuildContext context, EditableTextState editableTextState) {
   
   
    return AdaptiveTextSelectionToolbar.editableText(
      editableTextState: editableTextState,
    );
  }

二、自定义AdaptiveTextSelectionToolbar

继承AdaptiveTextSelectionToolbar实现自定义的toolbar样式CustomTextSelectionToolbar

自定义后需要实现按钮列表

List<Widget> resultChildren = <Widget>[];
for (int i = 0; i < buttonItems!.length; i++) {
   
   
  final ContextMenuButtonItem buttonItem = buttonItems![i];
  resultChildren.add(SelectionToolBarButton(
    width: 100,
    height: 50,
    icon: (i == 0)?Icon(
      Icons.cut,
      color: Colors.white,
      size: 14,
    ):Icon(
      Icons.copy,
      color: Colors.white,
      size: 16,
    ),
    title: getButtonLabelString(context, buttonItem),
    onPressed: buttonItem.onPressed,
  ));
}

自定义按钮SelectionToolBarButton，设置icon+title的按钮样式

class SelectionToolBarButton extends StatelessWidget {
   
   
  const SelectionToolBarButton({
   
   
    super.key,
    required this.width,
    required this.height,
    required this.icon,
    required this.title,
    required this.onPressed,
  });

  final dou