老孟导读:此文翻译自:https://medium.com/@suragch/my-first-disappointment-with-flutter-5f6967ba78bf
我喜欢Flutter。我喜欢开发一次并让代码在Android和iOS上运行。我喜欢节省多少时间。我喜欢现在成为一名Web开发人员,而无需做任何额外的工作。我喜欢hot reload。我喜欢通过将小部件组合到布局中来快速构建UI。我喜欢制作ListView简单得多。我喜欢状态管理。 (好吧,只是在开玩笑。但是我可以应付。)我喜欢Dart。我喜欢Future和async / await比Android AsyncTasks甚至iOS Dispatch Queue容易得多。
但是,在花了最后两周的时间研究Flutter如何呈现文本后,我对使用的工具感到失望。
我们被告知:
Flutter的分层体系结构使您可以控制屏幕上的每个像素。
这显然不适用于用于绘制文本的像素。
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类获得低级控件来执行上面列出的所有操作。以下是可用的众多选项中的几个:
- [Canvas.drawTextOnPath](https://developer.android.com/reference/android/graphics/Canvas.html#drawTextOnPath(java.lang.String, android.graphics.Path, float, float, android.graphics.Paint))
- [Canvas.drawTextRun](https://developer.android.com/reference/android/graphics/Canvas.html#drawTextRun(char[], int, int, int, int, float, float, boolean, android.graphics.Paint))
- Paint.getFontMetrics
- [Paint.measureText](https://developer.android.com/reference/android/graphics/Paint.html#measureText(java.lang.String, int, int))
我在iOS上没有那么低级的文字绘制经验(因为我认为我只会学习在Flutter中做所有事情),但是Core Text具有丰富的工具集。
Flutter 指南中如此说:
以多个平台为目标的SDK是很常见的……提供可在所有目标平台上运行的API。不幸的是,这通常意味着一个平台或另一个平台独有的功能不可用。
对于Flutter,我们希望通过明确地成为每个平台的最佳开发方式来避免这种情况。我们在跨平台上使用的能力仅次于我们在每个平台上使用的能力。 (添加了重点)
当前,对于需要在应用程序中进行低级文本渲染的我们当中,Flutter并不是最好的开发平台。
用例
您可能会说Flutter已经提供了Text和RichText小部件。是的,他们非常好。他们将满足99.9%的开发人员的需求。但是,存在使用较低级别的文本呈现工具的用例。
蒙文
我的用例是布局并渲染传统的蒙古文字,该文字垂直书写,并从左到右换行。英语是侧身书写,但CJK和表情符号字符应保持其正常方向。
有一些使用小部件组合的“解决方案”,但是当您添加文本样式的需要时(例如通过在文本的右侧绘制一条垂直线来“下划线”),一种更可靠的解决方案是处理所有文本手工测量,布置和绘画。我已经开始在这里工作了。
中文,日文和韩文
中文,日文和韩文也可以按各种垂直方向进行布局。像蒙古语一样,有一种解决方法,可以解决一次性情况,但对于常用用法,渲染包会更有帮助。阅读此内容以更详细地描述需求。
Flutter仅支持支持从右到左和从左到右的布局。不支持(也不支持
文章来源: 博客园
- 还没有人评论,欢迎说说您的想法!