详细介绍:flutter3.7.12版本设置TextField的contextMenuBuilder的文字颜色

线上版本用的是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枚举的所有类型都换成文字,解决了。

posted @ 2025-08-16 19:32  wzzkaifa  阅读(23)  评论(0)    收藏  举报