Flutter组件学习（一）—— Text组件

序言

之前说会给大家一一讲解 Flutter 中的组件，今天咱们就从 Text 组件开始，无图言X，先上图：

Text组件的API

我们先来看一下 Text 组件的构造方法

class Text extends StatelessWidget {
  const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(data != null),
       textSpan = null,
       super(key: key);
       
  const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null),
      data = null,
      super(key: key);
}

构造方法有两个，一个是默认的 Text 样式，一个是现实丰富 Text.rich 样式，这样解释大家应该能猜得到就和 Android 中的 SpannableString 一样，下面来看一下 Text 组件的一些 API ：

API名称	功能
textAlign	文本对齐方式（center居中，left左对齐，right右对齐，justfy两端对齐）
textDirection	文本方向（ltr从左至右，rtl从右至左）
softWare	是否自动换行（true自动换行，false单行显示，超出屏幕部分默认截断处理）
overflow	文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）
textScaleFactor	字体显示倍率
maxLines	文字显示最大行数
style	字体的样式设置

下面是 TextStyle 的 API ：

API名称	功能
decoration	文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线）
decorationColor	文字装饰线颜色
decorationStyle	文字装饰线风格（[dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪线）
wordSpacing	单词间隙（如果是负值，会让单词变得更紧凑）
letterSpacing	字母间隙（如果是负值，会让字母变得更紧凑）
fontStyle	文字样式（italic斜体，normal正常体）
fontSize	文字大小
color	文字颜色
fontWeight	字体粗细（bold粗体，normal正常体）

还有一点需要注意的是，在 Flutter 中，并不是每个 Widget 都有点击事件，比如 Text 就没有，这时候你需要用一个 GestureDetector 组件包住 Text 组件，然后实现它里面的 onTap() 事件，详细看下面代码：

class _TextViewWidget extends State<TextViewWidget> {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        Text('什么也不设置'),
        Padding(
          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
          child: Text(
            '设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行',
            //是否自动换行 false文字不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
            softWrap: true,
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
          child: Text(
            '设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则',
            //文字超出屏幕之后的处理方式  TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
          child: Text(
            '设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数',
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
          child: Text(
            '文本方向 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
            //TextDirection.ltr从左至右，TextDirection.rtl从右至左
            textDirection: TextDirection.rtl,
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
          child: Text(
            '文本对齐方式 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
            //TextAlign.left左对齐，TextAlign.right右对齐，TextAlign.center居中对齐，TextAlign.justfy两端对齐
            textAlign: TextAlign.center,
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
          child: Text(
            '设置颜色和大小',
            style: TextStyle(
              color: const Color(0xfff2c2b2),
              fontSize: 17,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
          child: Text(
            '设置粗细和斜体',
            style: TextStyle(
              //字体粗细，粗体和正常
              fontWeight: FontWeight.bold,
              //文字样式，斜体和正常
              fontStyle: FontStyle.italic,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
          child: Text(
            '设置文字装饰',
            style: TextStyle(
              //none无文字装饰，lineThrough删除线，overline文字上面显示线，underline文字下面显示线
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.wavy
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
          child: Text(
            '单词间隙 hello world i am jack',
            style: TextStyle(
              wordSpacing: 10.0,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
          child: Text(
            '字母间隙 hello world',
            style: TextStyle(
              letterSpacing: 10.0,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
          child: GestureDetector(
            onTap: () {
              print("点击了按钮");
            },
            child: Text(
              '设置文字点击事件',
              style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
          child: Text.rich(
            new TextSpan(
                text: 'Text.rich',
                style: new TextStyle(
                    color: Colors.yellow,
                    fontSize: 13,
                    decoration: TextDecoration.none),
                children: <TextSpan>[
                  new TextSpan(
                      text: '拼接1',
                      style: new TextStyle(
                          color: Colors.blue,
                          fontSize: 14,
                          decoration: TextDecoration.none)),
                  new TextSpan(
                      text: '拼接2',
                      style: new TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                          decoration: TextDecoration.none)),
                  new TextSpan(
                      text: '拼接3',
                      style: new TextStyle(
                          color: Colors.red,
                          fontSize: 16,
                          decoration: TextDecoration.none)),
                  new TextSpan(
                      text: '拼接4',
                      style: new TextStyle(
                          color: Colors.grey,
                          fontSize: 17,
                          decoration: TextDecoration.none)),
                ]),
          ),
        )
      ],
    );
  }
}

代码已上传至Github

公众号

欢迎关注我的个人公众号【IT先森养成记】，专注大前端技术分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技术；在这里你能得到的不止是技术上的提升，还有一些学习经验以及志同道合的朋友，赶快加入我们，一起学习，一起进化吧！！！