Flutter基础Widgets-Text

前文

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',
)
复制代码

运行结果以下图所示

• style

文本样式，样式属性以下表所示

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
    ),
)
复制代码

运行结果以下图所示

• textAlign

文本对齐方式，参数以下面表格所示

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,
            ),
        ),
    ],
)
复制代码

运行结果以下图所示

• 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,
            ),
        ),
    ],
)
复制代码

运行结果以下图所示

• locale

此属性不多设置，用于选择区域特定字形的语言环境

• softWrap

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

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

运行结果以下图所示

• overflow

处理溢出文本，参数以下面表格所示

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,
            ),
        ),
    ],
)
复制代码

运行结果以下图所示

• textScaleFactor

字体显示倍率

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

运行结果以下图所示

• maxLines

最大行数

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

运行结果以下图所示

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,
});
复制代码

其中style和text属性表明该文本的样式和内容；children是一个TextSpan的数组，也就是说TextSpan能够包括其余TextSpan；而recognizer用于对该文本片断上用于手势进行识别处理。下面看一个例子

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

运行结果以下图所示

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,
                    ),
                  ),
                ],
        ))
复制代码

运行结果以下图所示

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