實(shí)驗(yàn)一些常用的 Text 功能 （代碼Github地址）
Text 實(shí)驗(yàn)
Text 實(shí)驗(yàn)了 Text 常用的一些功能
- 文字大小調(diào)整
- 文字顏色設(shè)置
- 文字粗體雄卷，斜體
- Text 顯示的 maxLines 以及 是否換行
- 文字居中
- 文字的裝飾（下劃線腰懂，劃去）
- 單詞間隙箭昵，字母間隙的設(shè)置
- 文字點(diǎn)擊事件
- 文字拼接
Text Style 屬性
感覺Text的前面的一些地方都是通過改 Text 的屬性寝杖，可以直接進(jìn)入我的代碼地址看代碼看懂的段多，這邊就放一個(gè)屬性表酸些。
| 屬性 | 意義 |
|---|---|
| fontSize | 文字大小 |
| fontWeight | 文字粗細(xì) |
| color | 文字顏色 |
| fontFamily | 字體 |
| fontStyle | 文字風(fēng)格（可以設(shè)置斜體） |
| wordSpacing | 單詞之間的間隙 |
| letterSpacing | 字母之間的間隙 |
| locale | 區(qū)域設(shè)置 |
| decoration | 文字裝飾（例如下劃線取募，上劃線琐谤，劃去的效果） |
| decorationStyle | 文字裝飾的風(fēng)格（例如我上面代碼實(shí)現(xiàn)的波浪線） |
| decorationColor | 文字裝飾的顏色 |
文本點(diǎn)擊
點(diǎn)擊事件改變自己參數(shù)的時(shí)候要用 setState， 不然直接改 _tapText 界面并不會(huì)有反應(yīng)矛辕。
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: GestureDetector(
onTap: () {
setState(() {
if(_tapText=="啊我被點(diǎn)到了"){
_tapText="文字點(diǎn)擊事件, 點(diǎn)我笑跛！";
}else{
_tapText="啊我被點(diǎn)到了";
}
});
},
child: Text(
_tapText,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
文本拼接
拼接效果可以看上面的動(dòng)圖付魔，感覺拼接是一個(gè)很有趣的功能，可以在一段文字里實(shí)現(xiàn)不同的功能飞蹂，或者不同的點(diǎn)擊几苍，感覺例如一個(gè)英文文檔，可以點(diǎn)擊不同的文字獲取不同的中文翻譯這樣的功能可以這樣實(shí)現(xiàn)陈哑。
// 文本拼接
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text.rich(
new TextSpan(
text: '文字拼接: ',
style: new TextStyle(
color: Colors.black,
fontSize: 14,
decoration: TextDecoration.none),
children: <TextSpan>[
new TextSpan(
text: "文字一",
style: new TextStyle(
color: Colors.blue,
fontSize: 20,
decoration: TextDecoration.none)),
new TextSpan(
text: "文字二",
style: new TextStyle(
color: Colors.green,
fontSize: 14,
decoration: TextDecoration.none)),
new TextSpan(
text: "文字三",
style: new TextStyle(
color: Colors.red,
fontSize: 18,
decoration: TextDecoration.none)),
]),
),
)
