写点什么

我对 Flutter 的第一次失望,websocketapp 保活

用户头像
Android架构
关注
发布于: 2021 年 11 月 03 日

Flutter 中的低级文字功能

Flutter 使用名为 LibTxt 的库结合使用 Skia,Hafbuzz,Minikin 和 ICU 来呈现文本。开发人员在使用 Text 小部件或 TextSpan 甚至是 TextPainter 时间接使用它。在最低级别上,我们可以使用 dart:iu,它是使用 ParagraphBuilder 构建的 Paragraph 类。这些类基本上只是底层 LibTxt 引擎的包装器。几乎所有工作都由此引擎完成,而在 dart:ui 中几乎没有暴露。


Paragraph 类为我们提供了以下控制:


  • Size:我可以获取整个渲染段落的宽度和高度,它可以是单行或多行。

  • 距基线的距离(仅对于第一行)

  • 文本是否溢出了 maxLines 变量。

  • 文本框的大小和相对位置。这是一个例子:



  • 最接近某个像素位置的文本字符索引。在上面的示例中,像素(1、1)对应于字符串中的索引 0,即“My text line.”的字母“ M”。

  • 字符串中某些字符偏移的单词边界。


随后的更新也为我们提供了LineMetrics,它为每行提供了许多详细信息:


class LineMetrics {final bool hardBreak;final double ascent;final double descent;final double unscaledAscent;final double height;final double width;final double left;final double baseline;final int lineNumber;}



但是,我们没有得到:


  • 一种在文本框中获取实际文本的方法。

  • 一种控制文本布局方式的方法。

  • 一种在路径上绘制文本的方法。

  • 一种无需绘制整个段落即可测量和绘制短文本的方法。

  • 一种从文本字符串获取换行位置的方法

与 Android 和 iOS 的比较

在 Android 中,尽管大多数人会使用 TextView,但是您可以通过使用 StaticLayout,Canvas 和 Paint 类获得低级控件来执行上面列出的所有操作。以下是可用的众多选项中的几个:




《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


在 iOS 上没有那么低级的文字绘制经验(因为我认为我只会学习在 Flutter 中做所有事情),但是 Core Text 具有丰富的工具集。


Flutter 指南中如此说:


以多个平台为目标的 SDK 是很常见的……提供可在所有目标平台上运行的 API。不幸的是,这通常意味着一个平台或另一个平台独有的功能不可用。

对于 Flutter,我们希望通过明确地成为每个平台的最佳开发方式来避免这种情况。我们在跨平台上使用的能力仅次于我们在每个平台上使用的能力。 (添加了重点)


当前,对于需要在应用程序中进行低级文本渲染的我们当中,Flutter 并不是最好的开发平台。

用例

您可能会说 Flutter 已经提供了 Text 和 RichText 小部件。是的,他们非常好。他们将满足 99.9%的开发人员的需求。但是,存在使用较低级别的文本呈现工具的用例。

蒙文

我的用例是布局并渲染传统的蒙古文字,该文字垂直书写,并从左到右换行。英语是侧身书写,但 CJK 和表情符号字符应保持其正常方向。



有一些使用小部件组合的“解决方案”,但是当您添加文本样式的需要时(例如通过在文本的右侧绘制一条垂直线来“下划线”),一种更可靠的解决方案是处理所有文本手工测量,布置和绘画。我已经开始在这里工作了

中文,日文和韩文

中文,日文和韩文也可以按各种垂直方向进行布局。像蒙古语一样,有一种解决方法,可以解决一次性情况,但对于常用用法,渲染包会更有帮助。阅读此内容以更详细地描述需求。



Flutter 仅支持支持从右到左和从左到右的布局。不支持(也不支持??)垂直布局。我不会对此表示怀疑。有很多工作。但是我希望他们会给我们更多工具来自己做。

艺术文字

进行文字绘画的应用程序也将从对文字绘画工具的低级别访问中受益。


用文本填充非矩形形状

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
我对Flutter的第一次失望,websocketapp保活