Flutter基础Widgets-Text

1,840 阅读3分钟

前文

  1. 运行第一个Flutter App
  2. Flutter基础Widgets-Text
  3. Flutter可滚动Widgets-ListView
  4. Flutter主题切换之flutter redux
  5. Flutter插件开发之APK自动安装
  6. Flutter 开发一个 GitHub 客户端OpenGit及学习总结

个人博客

Text

构造函数

Text构造函数的源码如下面代码所示

const Text(this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
}) : assert(
    data != null,
    'A non-null String must be provided to a Text widget.',
    ),
    textSpan = null,
    super(key: key);

属性

  • data

需要显示的字符串

Text(
    'Hello World',
)

运行结果如下图所示

enter image description here

  • style

文本样式,样式属性如下表所示

enter image description here

Text(
    'Hello World',
    style: TextStyle(
        color: Colors.green,
        fontSize: 16.0,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
        letterSpacing: 2.0,
        wordSpacing: 1.5,
        textBaseline: TextBaseline.alphabetic,
        decoration: TextDecoration.lineThrough,
        decorationStyle: TextDecorationStyle.dashed,
        decorationColor: Colors.blue
    ),
)

运行结果如下图所示

enter image description here

  • textAlign

文本对齐方式,参数如下面表格所示

enter image description here

Column(
    children: <Widget>[
        Text(
            text,
            textAlign: TextAlign.left,
            style: TextStyle(
              color: Colors.green,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.black,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.right,
            style: TextStyle(
              color: Colors.yellow,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.start,
            style: TextStyle(
              color: Colors.red,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.end,
            style: TextStyle(
              color: Colors.orange,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.justify,
            style: TextStyle(
              color: Colors.blue,
            ),
        ),
    ],
)

运行结果如下图所示

enter image description here

  • textDirection

TextDirection.ltr,文本从左向右流动; TextDirection.rtl,文本从右向左流动。 相对TextAlign中的start、end而言有用(当start使用了ltr相当于end使用了rtl,也相当于TextAlign使用了left)

Column(
    children: <Widget>[
        Text(
            text,
            textDirection: TextDirection.ltr,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            textDirection: TextDirection.rtl,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
    ],
)

运行结果如下图所示

enter image description here

  • locale

此属性很少设置,用于选择区域特定字形的语言环境

  • softWrap

是否自动换行,若为false,文字将不考虑容器大小,单行显示,超出屏幕部分将默认截断处理

Column(
    children: <Widget>[
        Text(
            text,
            softWrap: false,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            softWrap: true,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
    ],
)

运行结果如下图所示

enter image description here

  • overflow

处理溢出文本,参数如下面表格所示

enter image description here

Column(
    children: <Widget>[
        Text(
            text,
            overflow: TextOverflow.clip,
            maxLines: 3,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            overflow: TextOverflow.fade,
            maxLines: 3,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
        Text(
            text,
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(
                color: Colors.yellow,
            ),
        ),
    ],
)

运行结果如下图所示

enter image description here

  • textScaleFactor

字体显示倍率

Column(
    children: <Widget>[
        Text(
            text,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            textScaleFactor: 2,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
          ],
        )

运行结果如下图所示

enter image description here

  • maxLines

最大行数

Column(
    children: <Widget>[
        Text(
            text,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            maxLines: 3,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
    ],
)

运行结果如下图所示

enter image description here

Text.rich

在上面的例子中,Text的所有文本内容只能按同一种样式进行展示,如果我们需要对一个Text内容的不同部分按照不同的样式显示,那又该怎么处理?此时需要用到Text.rich

构造函数

const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
}) : assert(
        textSpan != null,
        'A non-null TextSpan must be provided to a Text.rich widget.',
    ),
    data = null,
    super(key: key);

属性

Text.rich中除了textSpan属性跟Text不一样,其他都一样。textSpan属性如下所示

TextSpan

TextSpan定义如下

const TextSpan({
    this.style,
    this.text,
    this.children,
    this.recognizer,
});

其中styletext属性代表该文本的样式和内容;children是一个TextSpan的数组,也就是说TextSpan可以包括其他TextSpan;而recognizer用于对该文本片段上用于手势进行识别处理。下面看一个例子

Text.rich(TextSpan(
    children: [
        TextSpan(
            text: "百度: "
        ),
        TextSpan(
            text: "https://www.baidu.com",
            style: TextStyle(
                color: Colors.blue
            ),
        ),
    ]
))

运行结果如下图所示

enter image description here

DefaultTextStyle

在widget树中,文本的样式默认是可以被继承的,父节点的文本样式子节点默认会继承,如果子节点中重新设置了默认样式的某些属性,那么则以子节点设置的为准。我们也可以通过设置inherit: false不继承父节点的默认样式。下面我们看一个例子

DefaultTextStyle(
    textAlign: TextAlign.left,
    style: TextStyle(
            fontSize: 20.0,
            color: Colors.green,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic),
            child: Column(
                children: <Widget>[
                  Text(
                    text,
                  ),
                  Text(
                    text,
                    style: TextStyle(
                      color: Colors.yellow,
                    ),
                  ),
                  Text(
                    text,
                    style: TextStyle(
                      inherit: false,
                      color: Colors.blue,
                    ),
                  ),
                ],
        ))

运行结果如下图所示

enter image description here

好了,Text相关的内容大概就这么多。更详细的请看官方文档