flutter3.7.12版本设置TextField的contextMenuBuilder的文字颜色

EmmaGuo20152025-08-17 12:41

线上版本用的是flutter3.7.12，报了个bug，TextField长按后弹出一个空白框。

这个空白框点击是有事件的，很离奇，但是得解决。

首先看了看源码，TextField原本的属性toolbarOptions已过时，推荐使用contextMenuBuilder设置，就找了一下contextMenuBuilder的用法，普遍是以下代码

复制代码

TextField(
  contextMenuBuilder: (BuildContext context, EditableTextState editableTextState) {
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: editableTextState.contextMenuButtonItems.map((item) {
        return ContextMenuButtonItem(
          onPressed: item.onPressed,
          label: Text(
            item.label,
            style: const TextStyle(color: Colors.red), // 改这里
          ),
        );
      }).toList(),
    );
  },
)

但是报错，3.7.12版本的lable只支持String，不支持Text。难道要更新版？

于是询问了chapt改为如下表达

复制代码

 var items = editableTextState.contextMenuButtonItems;

  return AdaptiveTextSelectionToolbar(
        anchors: editableTextState.contextMenuAnchors,
        children: items.map((ContextMenuButtonItem item) {
          return TextButton(
            onPressed: item.onPressed,
            child: Text(item.lable,
              style:  TextStyle(color: BaseColors.textBlack_1b), // 自定义颜色
            ),
          );
        }).toList(),
      );

跑通了，但是问题并没有被解决，经过测试发现 item.lable=null，那事件是怎么完成的呢？ContextMenuButtonItem内部有三个参数：onPressed，type，label。可以看到除了lable之外其他两个参数都有值，所以文字显示不出来是因为文字不存在。

于是做了个switch判断将ContextMenuButtonType枚举的所有类型都换成文字，解决了。