Text Widget

Text Widget

Text 类似于 iOS 中 UILabel 控件，用来显示文本信息。

Text(
    'Text 的使用',
),

运行效果如图：

• textAlign 文本的对齐方式；可以选择左对齐、右对齐还是居中。注意，对齐的参考系是Text widget本身。本例中虽然是指定了居中对齐，但因为Text文本内容宽度不足一行，Text的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有Text宽度大于文本内容长度时指定此属性才有意义。

  Text(
      'Text 的使用' * 7, // 字符串重复7次
      textAlign: TextAlign.center,
  ),
  

• maxLines 指定文本显示的最大行数，默认情况下，文本是自动换行的，如果设置了这个属性，则文本不会超过指定的行数。

  Text(
      'Text 的使用' * 70, // 字符串重复7次
      textAlign: TextAlign.center,
      maxLines: 4,
  ),
  

  

  image.png

• overflow 设置这个属性来指定截断方式，默认是直接截断

  • TextOverflow.clip 直接截断
  • TextOverflow.ellipsis 末尾 ... 方式截断
  • TextOverflow.fade 跟 TextOverflow.clip 有点类似，只是在底部有一层阴影效果
  • TextOverflow.visible 跟 TextOverflow.clip一样，暂未发现有什么区别

• textScaleFactor 代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery，那么会默认值将为1.0。

• style 是利用 TextStyle 去设置文本显示的样式如颜色、字体、粗细、背景等样式

  TextStyle(
          color: Colors.red, // 文字颜色
          fontSize: 18.0, // 字体大小
          height: 1.6, // 行间距
          fontStyle: FontStyle.italic, // 设置字体为斜体
          // backgroundColor: Colors.blueGrey, // 文字背景颜色
          // background: Paint()..color=Colors.blueAccent, // 文字背景颜色，不能跟 backgroundColor 同时设置
          decoration: TextDecoration.underline, // 在文本下面设置下划线
          decorationColor: Colors.blueAccent, // 设置下划线的颜色
          decorationStyle: TextDecorationStyle.double, // 设置下划线为双线
  ),
  

  

• 富文本

  Text.rich(
            TextSpan(
              children: [
                TextSpan(
                  text: '这是富文本第一部分', // 要显示的文本
                  style: TextStyle(
                    fontSize: 16.0, // 字体大小
                    color: Colors.blueGrey, // 字体颜色
                  ),
                ),
                TextSpan(
                  text: '富文本第二部分',
                  style: TextStyle(
                    fontSize: 60.0,
                    color: Colors.red,
                    decoration: TextDecoration.underline,
                    decorationStyle: TextDecorationStyle.dashed,
                  ),
              ),
          ],
      ),
      textAlign: TextAlign.center,
  ),