Flutter中那些你需要知道的文本知识!

6,350 阅读11分钟

⚠️本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!

通过阅读本文,您将了解到

  1. 文本的组成部分;
  2. Flutter对于文本&段落是如何绘制的;
  3. 明白Flutter Text 背后的逻辑;
  4. 在业务中碰到一些文本显示的问题时,知道从哪些地方去尝试修改。

前言

文字是记录语言的书写符号系统,是形、音、义的统一体,是人类最重要的辅助性 交际工具。作为一个Flutter开发者,我们都知道可以通过Text()这个文本组件将文字显示出来。但是这其中的Flutter的字体是怎么组成的?Flutter文本是怎么构建的?Render Tree是怎样绘制文本的.....作为本专栏(整个专栏都在与文本打交道)的第一篇文章,让我们从这些原理细节讲起。希望能对你认识Flutter的文本渲染有所帮助。

注:本文的目的在于让大家了解Flutter中的基本文本知识,快速的带大家了解渲染流程,但并未很深入的分析Flutter文本渲染的原理。

字体基础理论通用部分

在整个网络世界中,大家可以将字体理解为一个数字文件,它是一个包含特定大小、粗细和样式的文件。它定义了每个字的形状、大小和图形。

例如Bariol_Regular.otf。.otf是字体文件格式。

1.png

有了字体格式后,我们会碰到相同的字体大小却有不同的显示布局这个问题。因为每一个字体格式都定义了它自己的参考大小,每一个字符都是基于这个大小设计的。所以即使设置同样的字体大小,也会有不同的布局。

2.png

3.png

在Flutter中文本由哪些部分组成?

Baseline
  • 在Flutter中,每一个字符都会在Baseline(基线)上。有了这个基线后,就算是不同大小的文字也可以处于同一水平线上。Baseline是非常重要的,因为可以通过它测量文本和元素之间的垂直距离。其他还有MiddlelineBottomlineTopline

4.png

  • Baseline的算法公式推导有兴趣的朋友可以自行搜索。
Text Spacing
  • 文字间距是指一段文本中每个文字之间插入的空间。
  • 在Flutter中可以通过TextStyle下的wordSpacing设置单词与单词之间的间距,通过letterSpacing设置字符与字符之间的间距。

5.png

Weight
  • Weight是指字体笔画的粗细,在Flutter中通过fontWeight设置。

    常见的有:normalbold,其他还有FontWeight.w100...等粗细值

TextStyle(
  fontWeight: FontWeight.bold 
),
TextSpan

在Flutter中,我们经常会使用Text()这个组件,但是我们通过阅读Text()的源码后就可以知道,它的build方法返回的就是RichText组件。所以它会呈现为TextSpanSpan指的是字符之间的行距。

@override
Widget build(BuildContext context) {
...
  Widget result = RichText(
    ...
    text: TextSpan(
      style: effectiveTextStyle,
      text: data,
      children: textSpan != null ? <InlineSpan>[textSpan!] : null,
    ),
  );
  ...
  return result;
}
Height

在Flutter中,定义了一个TextStyle.height,用于给呈现文本的TextSpan一个准确的行高。

TextStyle(height: 1)

但是我们需要注意,每一种字体格式都定义了自己的字体度量默认高度,这也是为什么即使设置了相同的字体高度,也会有不同的TextSpan的高度。

让我们来看下这个例子:

红色是Flutter默认的字体,蓝色是Bariol_Regular字体,绿色是Bellota-Regular字体,看看他们在相同height下不同的框高度。

  • 默认height

6.png

  • height: 1.0

7.png

  • height:0.8

8.png

这个例子也很好的验证了:

  • 即使使用一样的fontSize,每种字体也都有不同的高度
  • 每一种字体都有不同的基线。

那么关于Flutter的字体组成我们也可以得到一个结论:使用多种字体大概率会因为基线的不同导致布局不协调!

Flutter中是如何绘制文本的?

通过ParagraphFlutter最后绘制文本时都是通过Paragraph完成的!

// Paragraph paragraph:文本对象
// Offset offset:文本绘制的位置
void drawParagraph(Paragraph paragraph, Offset offset)

举个例子: 通过drawParagraph绘制一段文字

9.png

import 'dart:ui' as ui;
class TextPainter extends CustomPainter {
  //创建段落构建器
  ParagraphBuilder paragraphBuilder = ParagraphBuilder(
      ParagraphStyle(fontWeight: FontWeight.bold, fontSize: 16))
    ..pushStyle(ui.TextStyle(color: Colors.black))
    ..addText('通过drawParagraph绘制的 Hello Taxze');
​
  @override
  void paint(Canvas canvas, Size size) {
    //设置段落宽度
    ParagraphConstraints paragraphConstraints =
        ParagraphConstraints(width: size.width);
    //计算绘制的文本位置及尺寸
    Paragraph paragraph = paragraphBuilder.build()
      ..layout(paragraphConstraints);
    //绘制
    canvas.drawParagraph(paragraph, const Offset(40.0, 50.0));
  }
​
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

使用:

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: SizedBox.expand(child: CustomPaint(painter: TextPainter())),
  );
}

SizedBox.expand包裹CustomPaint是为了给ParagraphConstraints(width: size.width)一个size。你也可以用其他的组件包裹它。

关于Flutter使用CustomPaint绘制文字的实践较为复杂,若要讲清楚绘制的主要知识点,则需要另开一篇文章来讲述。若对这个部分感兴趣的朋友可以阅读下这篇文章:Flutter学习:使用CustomPaint绘制文字 @菠萝橙子丶

Flutter是如何把一段长文字转变成段落的?

你有没有想过,Flutter是如何把一段长文字生成下面的这样一个段落的呢?

10.png

这张效果图的代码:

Container(
    color: Colors.red,
    width: 200,
    height: 100,
    margin: EdgeInsets.all(30),
    child: Text(
        "通过drawParagraph绘制的 Taxze Hello....")),

那么其中的自动换行是怎么实现的呢?

11.png 我们知道,段落指的就是一段文本,我们要给每个字符一个合适的大小和位置。那么Flutter是如何计算这些参数的呢?

在前文说到过,Flutter最后绘制文本时都是通过Paragraph完成的。Flutter就是通过Paragraph.layout来计算这些参数,而且ParagraphBuilder给每个字符都在渲染前分配了一个偏移量。通过Paragraph可以知道所有占位符的位置和尺寸大小。

class TextPosition {
  //创建一个表示字符串中特定位置的对象。
  const TextPosition({
    required this.offset,
    this.affinity = TextAffinity.downstream,
  }) : assert(offset != null),
       assert(affinity != null);
  //举个例子:有一个“Hello”字符,offset = 0表示光标在字符H之前,offset = 5表示光标在字符o之后。
  final int offset;
  final TextAffinity affinity;
​
  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType)
      return false;
    return other is TextPosition
        && other.offset == offset
        && other.affinity == affinity;
  }
​
  @override
  int get hashCode => Object.hash(offset, affinity);
​
  @override
  String toString() {
    return 'TextPosition(offset: $offset, affinity: $affinity)';
  }
}

Text()背后的大哥有哪些?

--文本的渲染流程

从之前讲述的知识点,Text()组件它的build方法返回的就是RichText,但是Flutter最后绘制文本时又都是通过Paragraph完成的!那么其中的完整的一个流程是怎么样的呢?话不多说,先上图!

12.png

组件层

如图所示,每当我们使用Text组件时,它实际上创建的是RichText组件。但是RichTextText不同的是,TextString作为参数,而RichTextInlinSpan作为参数(或者说是TextSpan)。

const Text(String this.data)
    
//通过Text.rich构造函数传给RichText
const Text.rich(InlineSpan this.textSpan)
    
RichText(
      ...
      text: TextSpan(
        style: effectiveTextStyle,
        text: data,
        children: textSpan != null ? <InlineSpan>[textSpan!] : null,
      ),
)

//TextSpan继承于InlineSpan
class TextSpan extends InlineSpan implements HitTestTarget, MouseTrackerAnnotation {}

RichText接收TextSpan,而每一个TextSpan都有更多的子TextSpan,这些子TextSpan会 继承父TextSpan的样式。例如: 13.png

 RichText(
    text: TextSpan(
        style: Theme.of(context)
            .textTheme
            .bodyText1
            ?.copyWith(fontSize: 24),
        children: [
      TextSpan(
        text: 'Taxze ',
      ),
      TextSpan(text: 'blog', style: TextStyle(color: Colors.blue)),
      TextSpan(
        text: ' Flutter',
      ),
      TextSpan(text: '稀土掘金', style: TextStyle(color: Colors.blue)),
    ]))

不过,RichText本身是MultiChildRenderObjectWidget的子类。它们之间有这样的继承关系:

class RichText extends MultiChildRenderObjectWidget {}
abstract class MultiChildRenderObjectWidget extends RenderObjectWidget {}

MultiChildRenderObjectWidget产生的MultiChildRenderObjectElement则是这样的关系:

class MultiChildRenderObjectElement extends RenderObjectElement {}
abstract class RenderObjectElement extends Element {}

RichText实际上是需要一个InlineSpan,而InlineSpan可以是TextSpan或者是WidgetSpan。对WidgetSpan有兴趣的朋友,可以参考官方的文档WidgetSpan

到这里为止,我们可以将RichText(包括RichText)之前的所有划分为组件层,那么我们现在就要进入渲染层了。

渲染层

我们已经知道了RichText会创建一个渲染对象— RenderParagraph,那么RenderParagraph是干什么的呢?

RichTextMultiChildRenderObjectWidget的子类,它会把MultiChildRenderObjectElement往下传递,但是此时MultiChildRenderObjectElement没有渲染,它还没有什么作用。这个时候RichText会给它一个RenderParagraphRenderParagraph会收到RenderPadding的指令,这个时候MultiChildRenderObjectElement就准备好了一切,就可以开始工作了。

这样解释可能有点抽象,那么我们来看下这个例子:

body: Container(
            alignment: Alignment.center,
            child: Text("Taxze Hello"), ,
)

很简单的一个小例子,它的结构也很清晰:

14.png

当Flutter把三棵树都构建完后:

15.png

那么当我们改变文本时,又会发生什么呢?

最先改变的当然是组件层:

16.png

我们会有一个 “新” 的组件树。不过你真的认为都是新的吗?Flutter会充分利用现有的元素,让我们来看下这个名为canUpdate的方法吧。

static bool canUpdate(Widget oldWidget, Widget newWidget) {
  return oldWidget.runtimeType == newWidget.runtimeType
      && oldWidget.key == newWidget.key;
}

通过这个方法,Flutter可以检查一个老的组件的Typekey,并把它和新的组件进行比较。如果它们都相同的话,就不需要更新。

所以就算更新后,Container更新之后它还是存在的,而且我们没有给它一个Key,所以OldContainerNewContainer是完全相同的。Align、Text、以及RichText它们的Type和Key都没有变化,重新构建它们没有什么意义,所以它们都不会有更新。

到这里,我猜你肯定会问,都没有更新,那么文本是如何改变的呢?

那么我们就要讲到组件中的属性了。组件除了具有Type和Key之外,还有属性。属性的改变会使RenderParagraph显示新的文本。

不过关于文本的更改渲染到现在我们都是在纸上谈兵,那么我们现在就来用一个简单的例子去验证之前的结论。

  bool _isFirst = true;
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.swap_horiz),
          onPressed: () {
            setState(() {
              _isFirst = !_isFirst;
            });
          },
        ),
        body: _isFirst ? first() : second());
  }
}
​
Widget first() => Container(
      alignment: Alignment.center,
      child: const Text("Taxze First"),
);
​
Widget second() => Container(
      alignment: Alignment.center,
      child: const Text("Taxze Second"),
);

非常简单的一个例子,点击按钮更改显示文字。当我们点下按钮时,文本改变后,所有的组件都会重用,Flutter只会重建RenderPadding

绘制层

在渲染层中,我们最后发生文本变化都在RenderParagraph上,不过RenderParagraph并不会直接的绘制文本,而是会创建一TextPainter来管理绘制的工作。

17.png 不过,TextPainter做的事和它的名字完全不一样,你以为就是它来绘制文本的吗?No~

实际上,它只是负责管理绘制的事,但它自己不会去绘制(当老板)。

基础层

到现在为止,你会发现,讲了那么多,但是还是没有那个ta去真正的绘制文本,就好像之前的所有的组件都在当中间商,把活外包了出去。

到了Flutter的最底层,你会发现有一个ParagraphBuilderParagraph,在前面关于Flutter如何绘制文本中,我们也提到了Flutter最后绘制文本时都是通过Paragraph完成的,而TextPainter是负责创建ParagraphBuilder的,但是当你翻看Paragraph类的源码时,你会发现,大部分的函数都是空函数,原来这哥们也没干活啊!

@pragma('vm:entry-point')
class Paragraph extends NativeFieldWrapperClass1 {
  @pragma('vm:entry-point')
  Paragraph._();
​
  bool _needsLayout = true;
​
  double get width native 'Paragraph_width';
​
  double get height native 'Paragraph_height';
​
  double get longestLine native 'Paragraph_longestLine';
​
  double get minIntrinsicWidth native 'Paragraph_minIntrinsicWidth';
​
  double get maxIntrinsicWidth native 'Paragraph_maxIntrinsicWidth';
​
  double get alphabeticBaseline native 'Paragraph_alphabeticBaseline';
  ...
}

引擎层

ParagraphParagraphBuilder这两个类都将绘制的工作交给了Flutter Engine后,我们也要将视线放到SkParagraph上了,在以前Flutter Engine处理文本绘制的库是LibText。后面切换成了SkParagraph,但是也实现了和Libtext相同的API。对于Flutter引擎在这篇文章中只做一个简单的说明,若对引擎感兴趣的朋友可以自己编译FlutterEngine进行学习,或者在线阅读

--更详细更深入的Flutter文本渲染原理有兴趣的朋友可以阅读这篇文章

解决Flutter文本基线不对齐的问题

经常在各大Flutter交流群中看到有哥们问这样的问题:Row中,两个文本没有对齐,这怎么处理呀?

18.png 展示图代码:

Center(
  child: Row(
    children: [
      ColoredBox(
        color: Colors.amber,
        child: Text.rich(TextSpan(children: [
          TextSpan(text: "¥999", style: TextStyle(fontSize: 28)),
          TextSpan(text: ".9", style: TextStyle(fontSize: 14)),
        ])),
      ),
      ColoredBox(
        color: Colors.red,
        child: Text.rich(TextSpan(children: [
          TextSpan(text: "123", style: TextStyle(fontSize: 12)),
        ])),
      ),
    ],
  ),
)

其实处理这个问题很简单,只需要给Row加上:

textBaseline: TextBaseline.alphabetic,
crossAxisAlignment: CrossAxisAlignment.baseline,

19.png

关于更多有关文本的布局问题大家可以查看官方这篇文档

尾述

在这篇文章中,我们知道了文本是由什么组成的,Flutter是怎样将文本显示到屏幕上的。但是这也只是Flutter关于文本的一小部分,关于文本的编辑...等内容将会在后续的文章中继续探索。希望这篇文章能对你有所帮助,有问题欢迎在评论区留言讨论~

参考&推荐阅读

Flutter Text Rendering — @Jonathan Sande

书后拓展:Flutter 中一行文字到屏幕上,渲染全过程!@MeandNi

Flutter 小技巧之玩转字体渲染和问题修复@恋猫de小郭

Flutter学习:使用CustomPaint绘制文字 @菠萝橙子丶

关于我

Hello,我是Taxze,如果您觉得文章对您有价值,希望您能给我的文章点个❤️,有问题需要联系我的话:我在这里

如果您觉得文章还差了那么点东西,也请通过关注督促我写出更好的文章——万一哪天我进步了呢?😝

— 文字是人类用符号记录表达信息以传之久远的方式和工具。