android ios Flutter Widgets 之 RubyText

​​ 最近在用 Flutter 做一个日语类 App，需要用到上面这种展示效果。HTML 的 ruby 标签可以达到这个目的，可惜 Flutter 不行，只能自己动手实现。

我一开始想得比较简单，不就是一个 Row 或者 Wrap 里面嵌入许多 Column 吗，直到读完 RubyText 的源码，我才发现是我肤浅了。 如上图所示，日语中的汉字和它的读音跟中文的汉字不一样，不是以字为单位，也就是说一个汉字可能对应多个假名，一个假名也可能对应多个汉字（比较少见），自然就会带来一个问题：汉字和假名，上下两行，一个长一个短，单纯用 Column 布局不好看。

那怎么办呢？一起来看下 RubyText 的实现方式：

源码地址：https://github.com/YeungKC/RubyText

用法

RubyText(

[

RubyTextData(

'検査',

ruby: 'けんさ',

),

],

);

分成上下两行的文本，上面一行叫 ruby，下面一行叫 text。

RubyText 要做的事情就是对 ruby 和 text 进行排版，使上下两行看起来比较和谐。

对于一个带 ruby 的 text：

如果 ruby 长度大于 text，那么需要加大 text 的 letter space，使上下两行左右对齐反之，则需要增加 ruby 的 letter space

对于不带 ruby 的 text，则无需计算。

先从 RubyTextData 开始分析：

const RubyTextData(

this.text, {

this.ruby,

this.style,

this.rubyStyle,

this.textDirection = TextDirection.rtl,

});

text 必传，表示文本，比如上例中的【検査】ruby 非必需，表示振り仮名，有些字无需 ruby，所以可以为空style 用于 textrubyStyle 用于 rubytextDirection 表示文本方向

然后，RubyTextData 作为数组传给 RubyText：

class RubyText extends StatelessWidget {

const RubyText(

this.data, {

Key? key,

this.spacing = 0.0,

this.style,

this.rubyStyle,

this.textAlign,

this.textDirection,

this.softWrap,

this.overflow,

this.maxLines,

}) : super(key: key);

final List data;

}

剩余参数可以对照 Flutter 自带的 Text widget.

重点分析一下 RubyText 拿到 List 后的处理流程：

首先将 RubyTextData 映射成一个 WidgetSpan然后用 Text.rich 构造出 Text Widget

这个流程中比较特殊的地方是 WidgetSpan 的 child 是一个 RubySpanWidget：

class RubySpanWidget extends HookWidget {

const RubySpanWidget(this.data, {Key? key}) : super(key: key);

final RubyTextData data;

}

其中一个 RubySpanWidget 对应一个 RubyTextData：

注意，HookWidget 不是 flutter 自带的，是一个三方 package => flutter_hooks

我们来逐行分析一下 build 方法的内部实现逻辑：

final defaultTextStyle = DefaultTextStyle.of(context).style;

final boldTextOverride = MediaQuery.boldTextOverride(context);

defaultTextStyle 值来自 DefaultTextStyle：

The text style to apply to descendant Text widgets which don’t have an explicit style.

意思是，如果没有给后代 Text widgets 指定 style，Flutter 将会默认使用 DefaultTextStyle，这个值肯定也是通过父节点一级一级计算出来的。

继续往下分析，这里用到了 flutter hooks 的 useMemorized：

final result = useMemoized(

() {

//...

},

[defaultTextStyle, boldTextOverride, data],,

)

Caches the instance of a complex object.

useMemoized will immediately call valueBuilder on first call and store its result. Later, when the HookWidget rebuilds, the call to useMemoized will return the previously created instance without calling valueBuilder.

A subsequent call of useMemoized with different keys will call useMemoized again to create a new instance.

通过注释可以知道，useMemorized 用于缓存比较复杂的对象，如果 keys 不发生变化，所缓存的复杂对象就不会被重新计算。

T useMemoized(

T Function() valueBuilder, [

List keys = const