Flutter学习笔记04-文本Widget

2020-09-15 本文已影响0人 zombie

1.Text

在Android中，使用TextView显示文本，iOS中使用UILabel来显示文本；
Flutter中，使用Text控制文本如何展示。Text用于显示简单样式文本，代码示例如下：

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '《定风波》 苏轼  莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。',
      textAlign: TextAlign.center, // 所有内容都居中对齐
      maxLines: 1, // 最多显示行数
      overflow: TextOverflow.ellipsis, // 超出部分显示...
    );
  }
}

textAlign
文本的对齐方式；可以选择左对齐、右对齐还是居中。
ps：对齐的参考是Text Widget本身。有时虽然是指定了居中对齐，但因为Text文本内容宽度不足一行，Text的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有Text宽度大于文本内容长度时指定此属性才有意义
maxLines
指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断，代码中指定的截断方式TextOverflow.ellipsis，它会将多余文本截断后以省略符“...”表示，TextOverflow的其它截断方式可查阅SDK文档
textScaleFactor
文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery，那么会默认值将为1.0。

2.TextStyle

TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。代码示例如下：

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。',
      textAlign: TextAlign.center, // 所有内容都居中对齐
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 17.0,
        height: 1.2,
        fontFamily: "Courier",
        background: Paint()..color = Colors.red,
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dashed,
      ),
    );
  }
}

效果图如下：

height
该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height
fontFamily
由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。
fontSize
该属性和Text的textScaleFactor都用于控制字体大小。fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。
代码只展示了TextStyle的部分属性，它还有一些其它属性，可查阅SDK文档。

3.TextSpan

当需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。TextSpan源码如下：

const TextSpan({
    this.text, 
    this.children,
    TextStyle style,
    this.recognizer,
    this.semanticsLabel,
  }) : super(style: style,);

其中style和text属性代表该文本片段的样式和内容。 children是一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan。recognizer一个手势识别器，它将接收到达此文本范围的事件，类型是GestureRecognizer。semanticsLabel语义标签，无实际用处，用于向Android上的TalkBack和iOS的VoiceOver提供图像描述。
ps：Talkback是一款由谷歌官方开发的系统软件,它的定位是帮助盲人或者视力有障碍的用户提供语言辅助。Voiceover功能是苹果公司在2009年4月新推出的一种语音辅助程序。
代码示例如下：

class TextSpanDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(
            text: '《定风波》',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
          TextSpan(
            text: "\n苏轼",
            style: TextStyle(fontSize: 18, color: Colors.redAccent),
          ),
          TextSpan(
            text: "\n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
          ),
        ],
      ),
      style: TextStyle(fontSize: 16, color: Colors.black),
      textAlign: TextAlign.center,
    );
  }
}

上面代码中，通过Text.rich方法将TextSpan添加到Text中，因为Text其实就是RichText的一个包装，而RichText是可以显示富文本的Widget。在Android中，我们可以使用SpannableString，在iOS中，我们可以使用NSAttributedString完成。

4.DefaultTextStyle

DefaultTextStyle是用于设置默认文本样式的。在Widget树中，文本的样式默认是可以被继承的（子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式），所以在Widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式。代码示例如下：

class DefaultTextStyleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      // 设置文本默认样式
      style: TextStyle(color: Colors.blue, fontSize: 18),
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('Hello Text!'),
            Text('Hello TextSpan!'),
            Text(
              'Hello DefaultTextStyle!',
              style: TextStyle(
                inherit: false, // 不继承默认样式
                color: Colors.red,
                fontSize: 12,
              ),
            )
          ],
        ),
      ),
    );
  }
}

示例运行效果如下：

代码传送门

Flutter学习笔记04-文本Widget

1.Text

2.TextStyle

3.TextSpan

4.DefaultTextStyle

猜你喜欢

热点阅读