Flutter实战入门
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.1.1　文本组件（Text）

Text组件是用于展示文本的组件，是最基本的组件之一。下面是Text源码的构造函数：

class Text extends StatelessWidget {
  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,
    this.textWidthBasis,
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);

通过源码我们发现，很多情况下属性都是“顾名思义”的，比如data表示Text组件展示的文本，是必填参数，style表示文本的样式等。Text主要属性参见表3-1。

表3-1　Text属性

使用Text组件直接显示“Flutter实战入门”，代码如下：

Text('Flutter 实战入门')

Text组件中style属性表示文本的样式，类型为TextStyle，TextStyle主要属性参见3-2。

表3-2　TextStyle属性

设置字体颜色为蓝色、字体大小为20，带阴影，代码如下：

Text(
          style: TextStyle(color: Colors.blue,fontSize: 20,
             shadows: [
               Shadow(color: Colors.black12,offset: Offset(3, 3),blurRadius: 3)
             ]),
       )

效果如图3-1所示。

图3-1　Text样式实战

Text组件中textAlign属性代表文本对齐方式，值包括左对齐、中间对齐、右对齐。分别设置为左对齐、中间对齐、右对齐，代码如下：

Container(
  width: 300,
  color: Colors.black12,
  child: Text('Flutter 实战入门'),
),
SizedBox(
  height: 10,
),
Container(
  width: 300,
  color: Colors.black12,
  child: Text(
    'Flutter 实战入门',
    textAlign: TextAlign.center,
  ),
),
SizedBox(
  height: 10,
),
Container(
  width: 300,
  color: Colors.black12,
  child: Text(
    'Flutter 实战入门',
    textAlign: TextAlign.end,
  ),
),

若要看到文本的对齐效果，需要父组件比文本组件大，所以加入Container父组件。Container是一个容器组件，SizeBox是为了分割开3个Text，效果如图3-2所示。

图3-2　Text对齐方式

softWrap属性表示是否自动换行，设置为true表示自动换行，设置为false表示不自动换行，代码如下：

Text(
          'Flutter 实战入门Flutter 实战入门Flutter 实战入门Flutter 实战入门
Flutter 实战入门Flutter 实战入门',
          softWrap: true,
        ),
        SizedBox(
          height: 10,
        ),
        Text(
          'Flutter 实战入门Flutter 实战入门Flutter 实战入门Flutter 实战入门
Flutter 实战入门Flutter 实战入门',
          softWrap: false,
        ),

效果如图3-3所示。

图3-3　Text自动换行

Overflow属性表示当文本超过范围时的截取方式，包括直接截取、渐隐、省略号。Overflow的值参见表3-3。

表3-3　Overflow的值

Overflow用法如下：

Container(
          width: 150,
          color: Colors.black12,
          child: Text(
            'Flutter 实战入门 截取方式：直接截取',
            overflow: TextOverflow.clip,
            softWrap: false,
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Container(
          width: 150,
          color: Colors.black12,
          child: Text(
            'Flutter 实战入门 截取方式：渐隐',
            overflow: TextOverflow.fade,
            softWrap: false,
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Container(
          width: 150,
          color: Colors.black12,
          child: Text(
            'Flutter 实战入门 截取方式：省略号',
            overflow: TextOverflow.ellipsis,
            softWrap: false,
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Container(
          width: 150,
          color: Colors.black12,
          child: Text(
            'Flutter 实战入门 截取方式：显示',
            overflow: TextOverflow.visible,
            softWrap: false,
          ),
        ),

效果如图3-4所示。

图3-4　Overflow的使用效果

项目中经常会遇到这样的需求：将一句话中的某几个字高亮显示。可以通过多个Text控件来实现这个需求，当然还有更简单的方式——通过TextSpan实现。例如，文本展示“当前你所看的书是《Flutter实战入门》。”，其中“Flutter实战入门”用红色高亮显示，代码如下：

Text.rich(
        TextSpan(
          text: '当前你所看的书是《',
          style: TextStyle(color: Colors.black),
          children: <InlineSpan>[
            TextSpan(text: 'Flutter 实战入门', style: TextStyle(color: Colors.red)),
            TextSpan(
              text: '》。',
            ),
          ],
        ),
      ),

效果如图3-5所示。

图3-5　TextSpan的使用效果

上一章目录下一章