Flutter - 控件之 RichText

最新推荐文章于 2025-10-08 05:31:33 发布

原创

最新推荐文章于 2025-10-08 05:31:33 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #RichText #TextSpan #富文本

本文详细介绍了Flutter中的富文本控件RichText，包括TextSpan的使用方法，如何设置文本样式和添加手势交互，以及Text.rich的创建步骤，展示了丰富的代码示例和实际效果。

Flutter - 控件之 RichText

RichText

RichText

RichText富文本，可以显示多个不同样式的文本，如一段文本中显示不同字体颜色，可点击交互等。
1、RichText参数解析：

RichText({
   
   
        Key key,
        @required this.text, //文本部件，TextSpan
        this.textAlign = TextAlign.start,
        this.textDirection, //文本方向
        this.softWrap = true, //文本换行处是否断行，默认true
        this.overflow = TextOverflow.clip, //文本溢出处理,TextOverflow.ellipsis省略号
        this.textScaleFactor = 1.0, //文本缩放系数，默认1.0，如设置为2，则，文本大小是指定fontSize的2倍。
        this.maxLines, //最多显示行数，溢出部分依据overflow样式处理
        this.locale,
        this.strutStyle,
        })

2、代码示例：

    Widget _buildRichText() {
   
   
      return Container(
        color: Colors.orange,
        child: RichText(
          text: TextSpan(
            children: [
              TextSpan(
                text: "小花花",
                style: TextStyle(
                    fontWeight: FontWeight.w500, color: Colors.black87),
              ),