Flutter学习之旅-Text、RichText

1.Text

简介

具有某个单一样式的文本显示widget组件，显示支持一行或者多行。默认样式会继承层级最为接近DefaultStyle，当然你也可以重新定义他的样式将DefaultStytle.inherit 设置为false

基本用法

• data Text显示的文本，必须填参数String
• textAlign 文本的对齐方式，可以选择左对齐、右对齐、居中等
• maxLines 文本显示的最大行数
• overflow 文本显示的截断方式
• textScaleFactor 文本缩放比例
• style 用于制定文本显示的样式如字体、颜色、粗细、背景

代码示例

class TextDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State {
  int index = 0;
  Duration timer = Duration(minutes: 50);

  @override
    Widget build(BuildContext context) {
      return Text(
        'I‘m a text',
        style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600 , color:Colors.cyan),
      );
    }
}

2.Rich Text

简介

在富文本使用多个不同风格的widget显示文本。要显示的文本使用TextSpan对象来描述，没个对象都有一个用于该子树的关联样式。文本可能会跨越多行，也可能全部显示在同一行上，具体取决于布局约束。

示例代码

class TextDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State {
  int index = 0;
  Duration timer = Duration(minutes: 50);

  @override
    Widget build(BuildContext context) {
      return RichText(
        text: TextSpan(
          text: 'This is ',
          style: TextStyle(color: Colors.black, fontSize: 18.0),
          children: [
            TextSpan(
              text: 'bold',
              style: TextStyle(fontWeight: FontWeight.bold, )
            ),
            TextSpan(
              text: ' text. '
            ),
            TextSpan(
              text: 'This is '
            ),
            TextSpan(
              text: 'larger ',
              style: TextStyle(fontSize: 22.0)
            ),
            TextSpan(
              text: 'font size.',),
            TextSpan(
              text: 'This is ',
            ),
            TextSpan(
                text: 'red ',
                style:TextStyle(color: Colors.red)
            ),
            TextSpan(
                text: 'color.',
            )
          ],
        ),
      );
    }
}