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

相关推荐
前端橙一陈40 分钟前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~43 分钟前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技011 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio1 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫3 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@3 小时前
前端发送请求时,参数的传递格式
前端
L李什么李3 小时前
HTML——使用表格制作简历
前端·javascript·html
未来之窗软件服务3 小时前
万象EXCEL开发(八)excel公式解析与依赖映射 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
linuxxx1103 小时前
ajax() 回调函数参数详解
前端·ajax·okhttp
王嘉俊9253 小时前
ThinkPHP 入门:快速构建 PHP Web 应用的强大框架
开发语言·前端·后端·php·框架·thinkphp