Flutter 富文本篇 (上): RichText 的使用

2023-10-08 17:55:06

一直以来，我们都能看到 RichText 在新闻资讯、电商购物、社交媒体等各领域的广泛运用。比如新闻资讯中，通常会将标题用大字体加粗显示，正文用较小的字体显示，链接用蓝色字体显示。又或者电商购物中，商品名称用粗体显示，价格用红色字体显示，商品用较小的字体显示。通过这些方式，我们可以让文本内容更加丰富美观，提高用户的阅读体验。

富文本是Flutter中的一个非常强大的组件，它允许我们在文本中加入各种样式，比如加粗、斜体、下划线、删除线、颜色、背景色、字体、字号、对齐方式等。除此之外，我们还可以将文本与其他控件进行组合，比如图片、视频、按钮等。

Flutter中提供了两个文本组件，即Text和RichText。Text组件用于显示普通文本，不支持样式设置。RichText组件用于显示富文本，支持样式设置。

我们要使用RichText组件，首先需要创建一个TextSpan对象，然后将TextSpan对象添加到RichText组件中。TextSpan对象表示一段文本，它可以包含各种样式。

TextSpan对象可以通过TextSpan()构造函数来创建。TextSpan()构造函数有两个参数，第一个参数是文本内容，第二个参数是文本样式。

下面是一个使用RichText组件的例子：

RichText(
  text: TextSpan(
    text: 'Hello World!',
    style: TextStyle(
      color: Colors.red,
      fontSize: 20,
      fontWeight: FontWeight.bold,
    ),
  ),
);

这段代码会创建一个RichText组件，并在组件中显示一段文本 "Hello World!"。文本的颜色为红色，字体大小为20，字体加粗。

我们可以使用TextSpan对象来设置文本的各种样式。比如，我们可以使用TextSpan对象的style属性来设置文本的颜色、字体大小、字体加粗等。

TextSpan对象的style属性是一个TextStyle对象。TextStyle对象包含了各种文本样式属性，比如颜色、字体大小、字体加粗等。

TextStyle对象可以通过TextStyle()构造函数来创建。TextStyle()构造函数有多个参数，每个参数代表一种文本样式属性。

下面是一个使用TextStyle对象来设置文本样式的例子：

TextStyle(
  color: Colors.red,
  fontSize: 20,
  fontWeight: FontWeight.bold,
);

这段代码会创建一个TextStyle对象，并将文本的颜色设置为红色，字体大小设置为20，字体加粗。

我们可以将TextStyle对象传递给TextSpan对象的style属性来设置文本样式。

下面是一个使用RichText组件和TextSpan对象来创建富文本的例子：

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(
      color: Colors.red,
      fontSize: 20,
      fontWeight: FontWeight.bold,
    ),
  ),
  text: TextSpan(
    text: 'World!',
    style: TextStyle(
      color: Colors.blue,
      fontSize: 16,
      fontWeight: FontWeight.normal,
    ),
  ),
);