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

相关推荐
UrbanJazzerati21 小时前
前端入门:vh、padding、margin、outline、pointer-events
前端·面试
wordbaby21 小时前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
卿·静1 天前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia1 天前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
tangweiguo030519871 天前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter
ITKEY_1 天前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia1 天前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub1 天前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw1 天前
hippy的主要原理
前端
子兮曰1 天前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化