序言
之前说会给大家一一讲解 Flutter 中的组件，今天咱们就从 Text 组件开始，无图言X，先上图：
image
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
