如何在 Flutter 中为 TextFields 提供自定义上下文菜单？

Question

颤振（在桌面上）显示了文本字段的自定义上下文菜单，这绝对是丑陋的：

您知道可以定制的方法吗？

更新

我确实找到了答案。您必须实现一个基于 TextInputField 的类TextSelectionControls并将其提供给selectionControlsTextInputField。您还可以查找其中MaterialTextSelectionControls有一个简单的实现来了解它是如何完成的。

Answer 1

使用Flutter 3.7，您现在可以在 Flutter 应用程序中的任何位置创建自定义上下文菜单。

许多contextMenuBuilder小部件已添加参数（例如TextField、CupertinoTextField、SelectionArea等）。您可以从中返回任何您想要的小部件contextMenuBuilder，包括修改默认的平台自适应上下文菜单。

示例：（来源）

TextField(
  contextMenuBuilder: (context, editableTextState) {
    final TextEditingValue value = editableTextState.textEditingValue;
    final List<ContextMenuButtonItem> buttonItems = editableTextState.contextMenuButtonItems;
    if (isValidEmail(value.selection.textInside(value.text))) {
      buttonItems.insert(
          0,
          ContextMenuButtonItem(
            label: 'Send email',
            onPressed: () {
              ContextMenuController.removeAny();
              Navigator.of(context).push(_showDialog(context));
            },
          ));
    }
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: buttonItems,
    );
  },
)

这项新功能也可以在文本选择之外使用ContextMenuController。例如，您可以创建一个图像小部件，在右键单击或长按时显示“保存”按钮：（来源）

ContextMenuRegion(
  contextMenuBuilder: (context, offset) {
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: TextSelectionToolbarAnchors(
        primaryAnchor: offset,
      ),
      buttonItems: <ContextMenuButtonItem>[
        ContextMenuButtonItem(
          onPressed: () {
            ContextMenuController.removeAny();
            Navigator.of(context).push(_showDialog(context));
          },
          label: 'Save',
        ),
      ],
    );
  },
  child: const SizedBox(
    width: 200.0,
    height: 200.0,
    child: FlutterLogo(),
  ),
)

您可以在以下位置找到更多自定义上下文菜单的示例：

• https://github.com/flutter/samples/tree/main/experimental/context_menus