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

用户2802329

发布于 2018-12-19 11:13:06

1.5K1

发布于 2018-12-19 11:13:06

文章被收录于专栏：Android先生Android先生

序言

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

Text组件的API

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

 1class Text extends StatelessWidget {
 2  const Text(this.data, {
 3    Key key,
 4    this.style,
 5    this.textAlign,
 6    this.textDirection,
 7    this.locale,
 8    this.softWrap,
 9    this.overflow,
10    this.textScaleFactor,
11    this.maxLines,
12    this.semanticsLabel,
13  }) : assert(data != null),
14       textSpan = null,
15       super(key: key);
16
17  const Text.rich(this.textSpan, {
18    Key key,
19    this.style,
20    this.textAlign,
21    this.textDirection,
22    this.locale,
23    this.softWrap,
24    this.overflow,
25    this.textScaleFactor,
26    this.maxLines,
27    this.semanticsLabel,
28  }): assert(textSpan != null),
29      data = null,
30      super(key: key);
31}

构造方法有两个，一个是默认的 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() 事件，详细看下面代码：

  1class _TextViewWidget extends State<TextViewWidget> {
  2  @override
  3  Widget build(BuildContext context) {
  4    return new Column(
  5      children: <Widget>[
  6        Text('什么也不设置'),
  7        Padding(
  8          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
  9          child: Text(
 10            '设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行',
 11            //是否自动换行 false文字不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
 12            softWrap: true,
 13          ),
 14        ),
 15        Padding(
 16          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 17          child: Text(
 18            '设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则',
 19            //文字超出屏幕之后的处理方式  TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
 20            overflow: TextOverflow.ellipsis,
 21          ),
 22        ),
 23        Padding(
 24          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 25          child: Text(
 26            '设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数',
 27            maxLines: 2,
 28            overflow: TextOverflow.ellipsis,
 29          ),
 30        ),
 31        Padding(
 32          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 33          child: Text(
 34            '文本方向 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
 35            //TextDirection.ltr从左至右，TextDirection.rtl从右至左
 36            textDirection: TextDirection.rtl,
 37          ),
 38        ),
 39        Padding(
 40          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 41          child: Text(
 42            '文本对齐方式 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
 43            //TextAlign.left左对齐，TextAlign.right右对齐，TextAlign.center居中对齐，TextAlign.justfy两端对齐
 44            textAlign: TextAlign.center,
 45          ),
 46        ),
 47        Padding(
 48          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
 49          child: Text(
 50            '设置颜色和大小',
 51            style: TextStyle(
 52              color: const Color(0xfff2c2b2),
 53              fontSize: 17,
 54            ),
 55          ),
 56        ),
 57        Padding(
 58          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
 59          child: Text(
 60            '设置粗细和斜体',
 61            style: TextStyle(
 62              //字体粗细，粗体和正常
 63              fontWeight: FontWeight.bold,
 64              //文字样式，斜体和正常
 65              fontStyle: FontStyle.italic,
 66            ),
 67          ),
 68        ),
 69        Padding(
 70          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
 71          child: Text(
 72            '设置文字装饰',
 73            style: TextStyle(
 74              //none无文字装饰，lineThrough删除线，overline文字上面显示线，underline文字下面显示线
 75              decoration: TextDecoration.underline,
 76              decorationColor: Colors.red,
 77              decorationStyle: TextDecorationStyle.wavy
 78            ),
 79          ),
 80        ),
 81        Padding(
 82          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 83          child: Text(
 84            '单词间隙 hello world i am jack',
 85            style: TextStyle(
 86              wordSpacing: 10.0,
 87            ),
 88          ),
 89        ),
 90        Padding(
 91          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 92          child: Text(
 93            '字母间隙 hello world',
 94            style: TextStyle(
 95              letterSpacing: 10.0,
 96            ),
 97          ),
 98        ),
 99        Padding(
100          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
101          child: GestureDetector(
102            onTap: () {
103              print("点击了按钮");
104            },
105            child: Text(
106              '设置文字点击事件',
107              style: TextStyle(
108                color: Colors.blue,
109                fontWeight: FontWeight.bold,
110                fontStyle: FontStyle.italic,
111              ),
112            ),
113          ),
114        ),
115        Padding(
116          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
117          child: Text.rich(
118            new TextSpan(
119                text: 'Text.rich',
120                style: new TextStyle(
121                    color: Colors.yellow,
122                    fontSize: 13,
123                    decoration: TextDecoration.none),
124                children: <TextSpan>[
125                  new TextSpan(
126                      text: '拼接1',
127                      style: new TextStyle(
128                          color: Colors.blue,
129                          fontSize: 14,
130                          decoration: TextDecoration.none)),
131                  new TextSpan(
132                      text: '拼接2',
133                      style: new TextStyle(
134                          color: Colors.black,
135                          fontSize: 15,
136                          decoration: TextDecoration.none)),
137                  new TextSpan(
138                      text: '拼接3',
139                      style: new TextStyle(
140                          color: Colors.red,
141                          fontSize: 16,
142                          decoration: TextDecoration.none)),
143                  new TextSpan(
144                      text: '拼接4',
145                      style: new TextStyle(
146                          color: Colors.grey,
147                          fontSize: 17,
148                          decoration: TextDecoration.none)),
149                ]),
150          ),
151        )
152      ],
153    );
154  }
155}

代码已上传至Github：https://github.com/24Kshign/FlutterWorkSpace/tree/master/flutter_element

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-11-29，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自 IT先森养成记微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度