Flutter教學(xué)目錄持續(xù)更新中
github源代碼持續(xù)更新中
1.Text介紹
文本顯示
2.創(chuàng)建Text
- Text() 構(gòu)造方法創(chuàng)建，只能生成一種style
- Text.rich() 靜態(tài)方法創(chuàng)建殴蓬，能夠生成多種style
3.Text屬性
- textDirection 文本對齊
TextAlign.center 將文本對齊容器的中心盼玄。
TextAlign.end 對齊容器后緣上的文本主守。
TextAlign.justify 拉伸以結(jié)束的文本行以填充容器的寬度勿决。即使用了decorationStyle才起效
TextAlign.left 對齊容器左邊緣的文本停蕉。
TextAlign.right 對齊容器右邊緣的文本屋彪。
TextAlign.start 對齊容器前緣上的文本释漆。 - maxLines 最大行數(shù)
- overflow 處理字?jǐn)?shù)溢出
TextOverflow.clip 剪切溢出的文本以修復(fù)其容器芬膝。
TextOverflow.ellipsis 使用省略號表示文本已溢出望门。
TextOverflow.fade 將溢出的文本淡化為透明。 - textScaleFactor 字號系數(shù)
4.TextStyle style 屬性
- color 文本顏色锰霜。
- decoration 繪制文本裝飾:
下劃線（TextDecoration.underline）
上劃線（TextDecoration.overline）
刪除線（TextDecoration.lineThrough）
無（TextDecoration.none） - decorationColor 繪制文本裝飾的顏色
- decorationStyle 繪制文本裝飾的樣式:
畫一條虛線 TextDecorationStyle.dashed
畫一條虛線 TextDecorationStyle.dotted
畫兩條線 TextDecorationStyle.double
畫一條實線 TextDecorationStyle.solid
畫一條正弦線(波浪線) TextDecorationStyle.wavy - fontWeight 繪制文本時使用的字體粗細(xì):
FontWeight.bold 常用的字體重量比正常重筹误。即w700
FontWeight.normal 默認(rèn)字體粗細(xì)。即w400
FontWeight.w100 薄癣缅，最薄
FontWeight.w200 特輕
FontWeight.w300 輕
FontWeight.w400 正常/普通/平原
FontWeight.w500 較粗
FontWeight.w600 半粗體
FontWeight.w700 加粗
FontWeight.w800 特粗
FontWeight.w900 最粗 - fontStyle 字體變體：
FontStyle.italic 使用斜體
FontStyle.normal 使用直立 - textBaseline 對齊文本的水平線:
TextBaseline.alphabetic：文本基線是標(biāo)準(zhǔn)的字母基線
TextBaseline.ideographic：文字基線是表意字基線厨剪；如果字符本身超出了alphabetic 基線哄酝，那么ideograhpic基線位置在字符本身的底部。 - fontFamily 使用的字體名稱（例如祷膳，Roboto）陶衅。如果字體是在包中定義的，那么它將以'packages/package_name/'為前綴（例如'packages/cool_fonts/Roboto'）
- fontSize 字體大小
- letterSpacing 水平字母之間的空間間隔（邏輯像素為單位）直晨〔缶可以使用負(fù)值來讓字母更接近。
- wordSpacing 單詞之間添加的空間間隔（邏輯像素為單位）勇皇≌志洌可以使用負(fù)值來使單詞更接近。
- height 文本行與行的高度敛摘，作為字體大小的倍數(shù)
- locale 用于選擇區(qū)域特定字形的語言環(huán)境
- background 文本背景色
- foreground 文本的前景色
- shadows 實現(xiàn)一些特殊效果
4.Text顯示單一格式文本
1600583389(1).png
final content = "這是一個flutter入門教學(xué)app";
Container(
color: Colors.grey,
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(10),
child: Text(
'內(nèi)容：$content$content$content$content$content$content$content$content',
textAlign: TextAlign.start,
maxLines: 3,
overflow: TextOverflow.ellipsis,
textScaleFactor: 1.0,
style: TextStyle(
// backgroundColor: Colors.blue,
fontSize: 16,
fontWeight: FontWeight.bold,
decorationColor: Colors.black,
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.double,
wordSpacing: 1.0,
letterSpacing: 0.2,
height: 1.5,
textBaseline: TextBaseline.ideographic,
shadows: [
Shadow(
blurRadius: 10,
offset: Offset(0.5, 0.5),
color: Colors.blue)
],
),
),
),
5.顯示多格式的文本
Text.rich支持顯示多種style的文本门烂，需要配合TextSpan使用，同時還可以對文字添加點擊等事件響應(yīng)
1600584138(1).png
Container(
color: Colors.grey,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 10),
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: '內(nèi)容：',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18,
),
recognizer: TapGestureRecognizer()
..onTap = () {
ToastUtil.showToast('內(nèi)容：');
},
),
TextSpan(
text: content,
style: TextStyle(color: Colors.blue, fontSize: 14),
recognizer: TapGestureRecognizer()
..onTap = () {
print(content);
ToastUtil.showToast(content);
},
)
],
),
),
),
下一節(jié)我們學(xué)習(xí)基礎(chǔ)組件之Icon
