[Flutter-01] Text

1. Text

const Text(
    this.data, {
    Key key,
    this.style,       // style: TextStyle(fontSize: 36)
    this.strutStyle,
    this.textAlign, // 文本对齐方式 如：TextAlign.left
    this.textDirection, // TextDirection.ltr
    this.locale,
    this.softWrap,
    this.overflow,      // 超出部分显示方式 如：TextOverflow.visible，表示超出部分也显示
    this.textScaleFactor, // 文本的缩放比例  如: 1.24
    this.maxLines, // 文本最大显示行数 如：2
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  })

1.1. Text范例

Widget build(BuildContext context) {
    return Text(
      '勾选协议',
      style: TextStyle(fontSize: 36),
      textDirection: TextDirection.ltr,
    );
  }

2. text 普通文本

// 普通文本
class TextNormal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container( // Container 可以控制text的位置调整
      padding: EdgeInsets.all(20), // 这个间距是text文本的整体间距20
      height: 400,
      color: Colors.black,
      child: Text(
        '在Flutter中，我们可以将文本的控制显示分成两类: \n\n控制文本布局的参数: \n如文本对齐方式 textAlign、文本排版方向 textDirection，文本显示最大行数 maxLines、文本截断规则 overflow 等等，这些都是构造函数中的参数。\n\n控制文本样式的参数: \n如字体名称 fontFamily、字体大小 fontSize、文本颜色 color、文本阴影 shadows 等等，这些参数被统一封装到了构造函数中的参数 style 中',
        style: TextStyle(
          fontSize: 18, // 字体大小
          color: Colors.redAccent, // 文本颜色
          fontWeight: FontWeight.bold, // 文本粗体
        ),
        textAlign: TextAlign.left, // 文本对齐方式
        maxLines: 20, // 文本最大显示行数
        overflow: TextOverflow.visible, // 超出部分显示方式
        textScaleFactor: 1.04, // 文本的缩放比例
        textDirection: TextDirection.ltr, // 文本
      ),
    );
  }
}

3. text富文本

// 富文本
class TextAttribute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '富文本展示： \n上面展示的文本，我们都应用了相同的样式，如果我们希望给他们不同的样式呢？\n如果希望展示这种混合样式，那么我们可以利用分片来进行操作。',
            style: TextStyle(fontSize: 20),
          ),
          Text.rich(
            TextSpan(
              children: [
                TextSpan(
                  text: '富文本展示',
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.redAccent,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                TextSpan(
                  text: '上面展示的文本，我们都应用了相同的样式，如果我们希望给他们不同的样式呢',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w100,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}