Flutter组件学习（一）—— Text组件
序言
之前说会给大家一一讲解 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
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号