Flutter之Text Widget（四）

1、文本Widget

1.1 普通文本

在Flutter中，我们可以将文本的控制显示分成两类：
控制文本布局的参数： 如文本对齐方式 textAlign、文本排版方向 textDirection，文本显示最大行数 maxLines、文本截断规则 overflow 等等，这些都是构造函数中的参数；
控制文本样式的参数： 如字体名称 fontFamily、字体大小 fontSize、文本颜色 color、文本阴影 shadows 等等，这些参数被统一封装到了构造函数中的参数 style 中；

class _MSHomeContentState extends State<MSHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Text(
      "《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生",
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.red,
      ),
    );
  }
}

我们可以通过一些属性来改变Text的布局：

• textAlign：文本对齐方式，比如TextAlign.center
• maxLines：最大显示行数，比如1
• overflow：超出部分显示方式，比如TextOverflow.ellipsis
• textScaleFactor：控制文本缩放，比如1.24
• shadows： 文本阴影

class _MSHomeContentState extends State<MSHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Text(
      "Hello World《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生",
      textAlign: TextAlign.center, // 文本对齐
      maxLines: 3, // 文本最大行数
      overflow: TextOverflow.ellipsis, // 文本超出部分显示方式 ...
      textScaleFactor: 1.2, // 控制文本缩放
      style: TextStyle(
        fontSize: 20, // 文本字体大小
        fontWeight: FontWeight.bold, // 文本字体厚度 bold
        color: Colors.red,
        wordSpacing: 15, // 单词间距
        letterSpacing: 10, // 字母间距
        shadows: [Shadow(color: Colors.blue, offset: Offset(2, 2))], // 文本阴影
      ),
    );
  }
}

1.2 Text完整实例

   Text(
        "Text组件的使用",
        style: TextStyle(
            // 文字颜色
            color: Color(0xfff0000),
            // none 不显示装饰线条，underline 字体下方，overline 字体上方，lineThrough穿过文字
            decoration: TextDecoration.none,
            // solid 直线，double 双下划线，dotted 虚线，dashed 点下划线，wavy 波浪线
            decorationStyle: TextDecorationStyle.solid,
            // 装饰线的颜色
            decorationColor: Colors.red,
            // 文字大小
            fontSize: 15.0,
            // normal 正常，italic 斜体
            fontStyle: FontStyle.normal,
            // 字体的粗细
            fontWeight: FontWeight.bold,
            // 文字间的宽度
            letterSpacing: 1.0,
            // 文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）
            height: 1,
            //对齐文本的水平线:
            //TextBaseline.alphabetic：文本基线是标准的字母基线
            //TextBaseline.ideographic：文字基线是表意字基线；
            //如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
            textBaseline: TextBaseline.alphabetic),
        // 段落的间距样式
        strutStyle: StrutStyle(
          fontFamily: 'serif',
          fontFamilyFallback: ['monospace', 'serif'],
          fontSize: 20,
          height: 2,
          leading: 2.0,
          fontWeight: FontWeight.w300,
          fontStyle: FontStyle.normal,
          forceStrutHeight: true,
          debugLabel: 'text demo',
        ),
        // 文字对齐方式
        textAlign: TextAlign.center,
        // 文字排列方向 ltr 左到右，rtl右到左
        textDirection: TextDirection.ltr,
        // 用于选择区域特定字形的语言环境
        locale: Locale('zh_CN'),
        // 软包裹 ，文字是否应该在软断行出断行
        softWrap: false,
        // 如何处理视觉溢出:clip 剪切溢出的文本以修复其容器。ellipsis 使用省略号表示文本已溢出。fade 将溢出的文本淡化为透明。
        overflow: TextOverflow.clip,
        // 文字的缩放比例
        textScaleFactor: 1.0,
        // 文本要跨越的可选最大行数,
        maxLines: 2,
        // 图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
        semanticsLabel: 'text demo',
        textWidthBasis: TextWidthBasis.longestLine,
      )

思考： 对于Text Widget，Flutter内部用于渲染的Widget是Text Widget吗？

Flutter内部是用RichText来渲染Text的。在Text的源码中，它build函数返回的是RichText，而RichText是继承于MultiChildRenderObjectWidget，所有RenderObjectWidget都是Flutter最终渲染的Widget。而TextWidget 只不过是多增加了些Widget树，和我们自定义的Widget类似

2、 富文本 Text.rich

多个文本不同颜色字体显示，可以使用TextSpan，在TextSpan的children中将每个文本使用TextSpan显示
文本中加入图标，可以使用WidgetSpan来创建

class _MSHomeContentState extends State<MSHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Text.rich(TextSpan(
      children: [
        TextSpan(text: "Hello", style: TextStyle(color: Colors.red)),
        WidgetSpan(
          child: Icon(
            Icons.favorite,
            color: Colors.red,
          ),
        ),
        TextSpan(text: "World", style: TextStyle(color: Colors.blue)),
      ],
    ));
  }
}