Flutter 中的 Text （文本）和 TextSpan （富文本）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

关于 Text

• 在 iOS 原生组件中，使用 UILabel 显示文本
• 在 Android 原生组件中，使用 TextView 显示文本
• 在 Flutter 组件中，使用 Text 显示文本

Text 构造方法及属性

• 通过 Text 源码说明，data 是必填参数，其他的都是可选参数

  const Text(
      String this.data, {
      Key? key,
      this.style,
      this.strutStyle,
      this.textAlign,
      this.textDirection,
      this.locale,
      this.softWrap,
      this.overflow,
      this.textScaleFactor,
      this.maxLines,
      this.semanticsLabel,
      this.textWidthBasis,
      this.textHeightBehavior,
  })
  

• Text 的常用属性

  属性	作用	类型
  data	文本显示内容（必传）	String
  textAlign	文本对齐方式	TextAlign
  maxLines	文本显示最大行数	int
  overflow	文本显示的截断方式	TextOverflow
  style	文本显示的样式如颜色、字体、粗细、背景等	TextStyle

  • 示例

    Text("在 iOS 原生组件中，使用 UILabel 显示文本",
        textAlign: TextAlign.right
    ),
    
    
    Text("在 Android 原生组件中，使用 TextView 显示文本，在 Android 原生组件中，使用 TextView 显示文本",
        overflow: TextOverflow.ellipsis,
    ),
    
    
    Text("在 Flutter 组件中，使用 Text 显示文本",
        textScaleFactor: 1.5
    ),
    

  • 示例效果

    

Text 的样式

• Text Widget 的 style 属性接收一个 TextStyle 类型的值。源码如下：

  const TextStyle({
      this.inherit = true,
      this.color,
      this.backgroundColor,
      this.fontSize,
      this.fontWeight,
      this.fontStyle,
      this.letterSpacing,
      this.wordSpacing,
      this.textBaseline,
      this.height,
      this.leadingDistribution,
      this.locale,
      this.foreground,
      this.background,
      this.shadows,
      this.fontFeatures,
      this.decoration,
      this.decorationColor,
      this.decorationStyle,
      this.decorationThickness,
      this.debugLabel,
      String? fontFamily,
      List<String>? fontFamilyFallback,
      String? package,
      this.overflow,
  })
  

• TextStyle 的常用属性

  属性	作用	类型
  color	设置文本的颜色	Color
  fontSize	设置字体大小	double
  fontWeight	字体的加粗权重	FontWeight
  fontStyle	文本显示样式	FontStyle
  height	行高，需要注意的是这里的值是个比例值	double

  • 示例

    Text(
        "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
        style: TextStyle(
        color: Colors.orange,
        fontSize: 20,
        height: 1.2,
        fontWeight: FontWeight.w600),
    )
    

  • 示例效果

    

关于 TextSpan

• 在 iOS 原生组件中，使用 NSAttributedString 显示富文本
• 在 Android 原生组件中，使用 SpannableString 显示富文本
• 在 Flutter 组件中，使用 TextSpan 显示富文本

TextSpan 构造方法及属性

TextSpan 实现富文本

• TextSpan 源码如下

  const TextSpan({
      this.text,
      this.children,
      TextStyle? style,
      this.recognizer,
      MouseCursor? mouseCursor,
      this.onEnter,
      this.onExit,
      this.semanticsLabel,
      this.locale,
      this.spellOut,
  })
  

• TextSpan 的常用属性

  属性	作用	类型
  text	文本显示内容（必传）	String
  style	文本显示的样式如颜色、字体、粗细、背景等	TextStyle
  children	子组件	TextSpan的数组
  recognizer	手势交互	监听点击事件：recognizer: TapGestureRecognizer()..onTap = () {

• 示例

  class HomeContent extends StatelessWidget {
      const HomeContent({Key? key}) : super(key: key);
      
      @override
      Widget build(BuildContext context) {
          return Text.rich(
              TextSpan(
                  children: [
                      const TextSpan(
                          text: "隐私条款 ",
                          style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              color: Colors.black)
                              ),
                      
                      TextSpan(
                          text: "https://www.baidu.com",
                          style: const TextStyle(fontSize: 18, color: Colors.redAccent),
                          recognizer: TapGestureRecognizer()
                              ..onTap = () {
                                  // ignore: avoid_print
                                  print("查看条款");
                          }
                      ),
                  ],
              ),
        style: const TextStyle(fontSize: 20, color: Colors.purple),
              textAlign: TextAlign.center,
          );
      }
  }
  

• 示例效果