flutter：文本组件--Text与富文本

大前端 flutter

发布时间 : 2025-08-17 00:00

字数:1.2k 阅读 :

Text
富文本

Text

Text的定义

Text Widget，从名字也可以看出，在 Flutter 里是用来负责显示文本信息的一个组件

const Text(
    //要显示的文字内容
    this.data,
   {
    //key类似于id
    Key key,
    //文字显示样式和属性
    this.style,
    this.strutStyle,
    //文字对齐方式
    this.textAlign,
    //文字显示方向
    this.textDirection,
    //设置语言环境
    this.locale,
    //是否自动换行
    this.softWrap,
    //文字溢出后处理方式
    this.overflow,
    //字体缩放
    this.textScaleFactor,
    //最大显示行数
    this.maxLines,
    //图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
    this.semanticsLabel,
  })

TextStyle 定义

style 属性比较常用，传入的是 TextStyle 对象，我们细看下它可以配置哪些属性样式。

const TextStyle({
    //是否继承父类组件属性
    this.inherit = true,
    //字体颜色
    this.color,
    //文字大小，默认14px
    this.fontSize,
    //字体粗细
    this.fontWeight,
    //字体样式,normal或italic
    this.fontStyle,
    //字母间距，默认为0，负数间距缩小，正数间距增大
    this.letterSpacing,
    //单词间距，默认为0，负数间距缩小，正数间距增大
    this.wordSpacing,
    //字体基线
    this.textBaseline,
    //行高
    this.height,
    //设置区域
    this.locale,
    //前景色
    this.foreground,
    //背景色
    this.background,
    //阴影
    this.shadows,
    //文字划线，下换线等等装饰
    this.decoration,
    //划线颜色
    this.decorationColor,
    //划线样式，虚线、实线等样式
    this.decorationStyle,
    //描述信息
    this.debugLabel,
    //字体
    String fontFamily,
    List<String> fontFamilyFallback,
    String package,
  })

示例

class ComponentPage extends StatelessWidget {
  const ComponentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('组件')),
      body: Column(
        children: [
          Text(
            '字体24下划线',
            // 文字对齐方式
            textAlign: TextAlign.center,
            //textScaleFactor: 1.5, // 字体缩放因子,但是过时了
            // 使用 TextScaler 来设置字体缩放因子：会读取用户在系统设置里的字体缩放比例，但最多放大到 2 倍。
            textScaler: MediaQuery.textScalerOf(
              context,
            ).clamp(maxScaleFactor: 2.0),
            style: TextStyle(
              // 字体颜色
              color: Colors.blue, // 蓝色
              // 字体粗细
              fontWeight: FontWeight.bold, // 粗体
              // 字体大小
              fontSize: 24, // 24 号字体
              // 字体下划线
              decoration: TextDecoration.underline, // 下划线
              // 字体下划线颜色
              decorationColor: Colors.red, // 红色
              // 字体背景色
              backgroundColor: Colors.yellow, // 黄色
            ),
          ),
          Text(
            '缩放，Each line here is progressively more opaque. The base color is material.Colors.black, and Color.withOpacity is used to create a derivative color with the desired opacity. The root TextSpan for this RichText widget is explicitly given the ambient DefaultTextStyle, since RichText does not do that automatically. The inner TextStyle objects are implicitly mixed with the parent TextSpans TextSpan.style.',
            // textScaleFactor: 1.0,// 过时啦
            // 字体缩放因子： 直接缩放2倍
            textScaler: TextScaler.linear(2),
            textAlign: TextAlign.start, // 左对齐
            // softWrap: true 表示文本是否可以换行
            softWrap: true,
            // maxLines: 5 表示最多显示5行，如果超出则会剪切
            maxLines: 5,
            // overflow表示文本溢出的处理方式
            // ellipsis表示溢出部分用...表示
            // fade表示溢出部分用渐变效果表示
            // clip表示溢出部分直接裁剪
            // 默认的处理方式是clip
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
          ),
        ],
      ),
    );
  }
}

富文本

什么是富文本

富文本就是带有多种样式或功能的文字。相比于普通的“单一文字 + 单一样式”，富文本可以在一段话里包含 不同字体、颜色、大小、下划线、超链接、甚至图片。

Hello Flutter World

普通文本：整段文字都是一样的样式，比如都是黑色、18号字。
富文本：
- “Hello” → 黑色、18号字
- “Flutter” → 蓝色、加粗、24号字
- “World” → 红色、带下划线

TextSpan

本质是一个 文字片段，可以设置独立的文字内容和样式。

支持嵌套（一个 TextSpan 可以有 children）。

不能单独显示，必须放在 RichText 或 Text.rich 里使用。

它的定义如下：

const TextSpan({
    //样式片段
    this.style,
    //要显示的文字
    this.text,
    //样式片段TextSpan数组，可以包含多个TextSpan
    this.children,
    //用于手势进行识别处理,如点击跳转
    this.recognizer,
  })

RichText

是 Flutter 底层的 富文本组件，用来展示由 TextSpan 构成的复杂文字。

可以让同一段文字的不同部分有不同样式。

它的定义如下：

const RichText({
    Key key,
    // 样式片段标签TextSpan
    @required this.text,
    this.textAlign = TextAlign.start,
    this.textDirection,
    this.softWrap = true,
    this.overflow = TextOverflow.clip,
    this.textScaleFactor = 1.0,
    this.maxLines,
    this.locale,
    this.strutStyle,
  })

Text.rich

是 Text 组件的一个 命名构造函数。

内部其实就是帮你创建了 RichText，语法更简洁。

适合在只需要展示富文本时使用，不必直接写 RichText。

它的定义如下：

const Text.rich(
    // 样式片段标签TextSpan
    this.textSpan,
  {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  })

案例展示

RichText

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black, fontSize: 18),
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: ' World!',
        style: TextStyle(color: Colors.red),
      ),
    ],
  ),
)

Text.rich

Text.rich(
  TextSpan(
    text: 'TextSpan',
    style: TextStyle(color: Colors.red, fontSize: 24.0),
    children: <TextSpan>[
      TextSpan(
        text: 'aaaaa',
        style: TextStyle(color: Colors.blueGrey),
      ),
      TextSpan(
        text: 'bbbbbb',
        style: TextStyle(color: Colors.cyan),
      ),
      TextSpan(
        text: 'Tap点击',
        style: const TextStyle(color: Colors.blueGrey),
        // 点击手势
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            //增加一个点击事件
            print('被点击了');
          },
      ),
    ],
  ),
),