Flutter Widget 之RichText

1,201 阅读1分钟

应用程序通常以阅读为主

因此,应用程序的文字排版非常重要。

在很多情况下,文字widget提供你需要的所有功能,它可以显示不同大小的文字、字体,样式等等。

但是,如果想在一句话或者一段文字里显示多种样式的文字组合,你该怎么做呢?

像是用粗体字强调重点或是用斜体字,或者下划线?或不同的颜色,或不同的字体?或是通通都用!

那么,你应该使用RichText,你给它一个TextSpans树,你可以为每个节点定义一个单独的样式。

在这里,我们在顶端的TextSpan使用默认的文字样式,

在其中一个字TextSpans中,我们使用更具装饰的文字样式进行覆盖。

RichText(
    text: TextSpan(
        style: DefaultTextStyle.of(context).style,
        children: [
            TextSpan(text: 'It's '),
            TextSpan(text: 'all', style: myBoldStyle),
            TextSpan(text: ' widgets'),
        ]
    ),
)

Flutter会按你的预期排列文字保持基线对齐。

你甚至可以把手势识别器附加到TextSpans上,比方说,设置一个可点击的超链接

如果想了解有关RichText的内容,或者关于Flutter的其他功能,请访问flutter.dev

原文翻译自视频:视频地址