无法在 Flutter 中扩展 TextField?

2023-12-28

我正在尝试修改文本字段,以便可以为同一文本字段中的特定单词设置不同的颜色。例如“我想要一个苹果”,“苹果”一词应该是绿色的,其余文本应该是黑色的。

有用于富文本编辑器的库(例如 zefyr、extended_text_field),但我还在 stackoverflow 上找到了 AnnotatedEditableText 的示例(https://stackoverflow.com/a/57846261 https://stackoverflow.com/a/57846261)。我喜欢最后一个解决方案(AnnotatedEditableText),但我想使用 TextField 来获得更丰富的功能,主要是我无法在只读可编辑文本中使用的文本选择。

另外,设置时expands: true作为 TextField 的参数,小部件会正确扩展以填充该区域。当为 EditableText 设置相同的属性时,没有任何反应。不知道为什么。

所以 - 我想将 TextField 与 AnnotatedEditableText 小部件一起使用。我可以在不复制粘贴整个 TextField 类的情况下完成此操作吗?这是我收集到的:

  • _TextFieldState 是私有的,无法扩展,但 EditableTextState 不是私有的,因此可以扩展小部件。
  • TextField 小部件不支持 EditableText 小部件的自定义实现。

有任何想法吗?为什么 _TextFieldState 是私有的,但 EditableTextState 不是私有的?


使用以下控制器:

class FruitColorizer extends TextEditingController {
  final Map<String, TextStyle> mapping;
  final Pattern pattern;

  FruitColorizer(this.mapping) : pattern = RegExp(mapping.keys.map((key) => RegExp.escape(key)).join('|'));
  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    List<InlineSpan> children = [];
    // splitMapJoin is a bit tricky here but i found it very handy for populating children list
    text.splitMapJoin(pattern, 
      onMatch: (Match match) {
        children.add(TextSpan(text: match[0], style: style.merge(mapping[match[0]])));
      },
      onNonMatch: (String text) {
        children.add(TextSpan(text: text, style: style));
      },
    );
    return TextSpan(style: style, children: children);
  }
}

将其用作:

TextField(
  style: TextStyle(fontSize: 32),
  controller: FruitColorizer({
    'apple': TextStyle(color: Colors.green, decoration: TextDecoration.underline),
    'orange': TextStyle(color: Colors.orange, shadows: kElevationToShadow[2]),
  }),
),

并输入你的TextField:“我吃了两个苹果、一个香蕉和三个橙子”

EDIT

如果您只想使用颜色,您可以添加命名构造函数:

FruitColorizer.fromColors(Map<String, Color> colorMap)
: this(colorMap.map((text, color) => MapEntry(text, TextStyle(color: color))));

并像这样使用它:

controller: FruitColorizer.fromColors({
  'apple': Colors.green,
  'orange': Colors.orange,
}),
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法在 Flutter 中扩展 TextField? 的相关文章

随机推荐

  • CSS悬停图像位置更改

    我确信这是超级愚蠢的事情 但现在我已经被困了一段时间 所以 我在网站上有图像 我希望它们在悬停时稍微移动 所以我在 HTML 中有 a href someaddress img class thumb src somefile a 在 CS
  • Dart SDK未配置

    我安装了 Flutter 并设置了 Android Studio 然后我在 GitHub 上克隆了一个 flutter 的示例 https github com flutter flutter https github com flutte
  • Linux 中的 Qt 线程问题

    我在我的项目中使用 Qt 进行开发已经有一段时间了 我们开始转向更加面向线程的设计 在将一些 GL 渲染小部件移动到其他线程后 我发现了一些非常奇怪的行为 看起来 如果 GL Widget 在接受用户输入的小部件 例如 QTextEdit
  • Android:如何加载PDF?

    有没有办法从浏览器或 WebView 中的 Asset URL 或任何其他方式加载 PDF 文件 目前还没有本地方法可以做到这一点 但是 您可以编写自己的 pdf 查看器活动 另外 请查看复制Go阅读器 http www cerience
  • 在 git 交互式变基期间添加了新文件,变基中止,新文件丢失

    我之前在几个节点上提交了 git rebase i 我添加了一些我打算添加到该提交中的新文件 看起来我在错误的节点上 所以我立即执行了 git rebase abort 这些新文件现在完全消失了 在引用日志中 看起来像是发出了删除命令 删除
  • Telegram markdown 语法:粗体 * 和 * 斜体? (2018年9月)

    通过查看Telegram 的 Markdown 语法 Wiki 页面 https sourceforge net p telegram wiki markdown syntax 创建文本应该相对容易粗体和斜体 在那里 它说 this is
  • Vuex Store 模块访问状态

    我想知道如何从另一个文件访问模块存储 状态 到目前为止 这是我的代码 store index js import Vuex from vuex import categories from modules categories Vue us
  • 允许在子命令后使用 argparse 全局标志

    我正在使用 argparse 构建带有子命令的命令 mycommand GLOBAL FLAGS 子命令 FLAGS 我希望全局标志无论在子命令之前还是之后都可以工作 有没有一种干净的方法来做到这一点而不涉及重复代码 例如 parser a
  • 如何更改 Material UI 自动完成弹出窗口的宽度

    当使用Select https material ui com api select 在 Material UI 中 有一个名为 autoWidth 的道具 它设置弹出窗口的宽度以匹配菜单内项目的宽度 是否有类似的选项自动完成 https
  • 基于骨骼运动的 Kinect 3D 手势识别 - 存在哪些库?

    Kinect 有哪些手势识别库 如果有 现在我正在使用 OpenNI 记录骨骼运动 但不确定如何从该运动到触发离散动作 我的问题可能像姿势检测一样简单 但也可能像基于时间的运动一样复杂 即检测他们何时将手绕圈移动 具体取决于其难度 我见过的
  • JavaScript:将 Json 数据数组更改为新格式

    我正在尝试使用需要以多种方式进行更改的 json 数据 我当前的json数据如下 file1 function1 calls 105 4 file file2 function function5 106 4 file file2 func
  • 当应用程序的部署目标设置为 6.0 或 6.1 时,Xcode 6 错误加载 3x 图像

    我在 xcode 的界面生成器中的故事板 或 xib 中构建 UI 时遇到此问题 将图像 在资源目录中具有相同名称 分配给 Interface Builder 中的图像视图后 xcode 会加载3x图像文件 而不是运行 ios8 的任何非
  • 包含 Vue.js v-if 和 v-for 指令的 HTML 标签在加载时闪烁

    我使用 Vue js 将数据发送到一个基本且非常简单的 API 该 API 通过电子邮件地址订阅时事通讯via下面的表格并显示一些消息 状态和错误 我特别使用指令 v if 和 v for 来显示错误和两条消息 问题是 当页面加载时 这两个
  • 如何使用ArrayList.addAll()?

    我想填写一个ArrayList与这些字符 等 我怎样才能做到这一点 而不必添加每个字符arrayList add 集合 addAll http docs oracle com javase 6 docs api java util Coll
  • Android 中未调用 WebView 方法

    我的 Web 视图没有调用 javascript 函数 它返回如下警告 任何人都可以建议如何消除以下警告 07 30 10 15 44 031 W webview proxy 3770 java lang Throwable Warning
  • 无法链接 FFmpeg 库

    我尝试构建这个 但总是出现链接时错误 include
  • java 8:LongAdder 和 LongAccumulator 是否优于 AtomicLong?

    LongAdder作为替代AtomicLong ExecutorService executor Executors newFixedThreadPool 2 IntStream range 0 1000 forEach i gt exec
  • 在 git 中应用存储更改,其中存储包含已移动的文件

    我当前的分支已将某些文件移动到不同的文件夹 并且创建的存储已对位于旧文件夹中的文件进行了更改 如何在不破坏任何东西的情况下正确应用藏匿物 并想知道最简单的方法 我看到了几个简单的步骤 移动一些文件 仅移动那些需要的文件git stash s
  • 如何在 PostgreSQL 中向现有表添加自动递增主键?

    我有一个包含现有数据的表 有没有办法在不删除并重新创建表的情况下添加主键 已更新 感谢评论的人 PostgreSQL 的现代版本 假设您有一个名为test1 您要向其添加自动递增的主键id 替代 列 在最新版本的 PostgreSQL 中
  • 无法在 Flutter 中扩展 TextField?

    我正在尝试修改文本字段 以便可以为同一文本字段中的特定单词设置不同的颜色 例如 我想要一个苹果 苹果 一词应该是绿色的 其余文本应该是黑色的 有用于富文本编辑器的库 例如 zefyr extended text field 但我还在 sta