TextStyle 文本樣式
- color 字體顏色
- fontSize （邏輯）字體大小屈糊，默認(rèn)14
- fontWeight 字體粗細(xì) 一般使用的屬性：FontWeight normal（默認(rèn)） 的榛、FontWeight bold（粗體）
- fontStyle 字體：normal和italic
- fontFamily 設(shè)置字體，注意和 fontStyle的區(qū)別
- letterSpacing 字母間距逻锐，默認(rèn)0夫晌，負(fù)數(shù)間距越小，正數(shù) 間距越大
- wordSpacing 單詞 間距昧诱，默認(rèn)0晓淀，負(fù)數(shù)間距越小，正數(shù) 間距越大盏档，注意和letterSpacing的區(qū)別凶掰，比如hello，h蜈亩、e懦窘、l、l稚配、o各是一個(gè)字母畅涂，hello是一個(gè)單詞
- textBaseline 字體基線
- height 類似 css 的 line-height 小數(shù)表示
- foreground 和 background 感覺(jué)用不到
- shadows 字體陰影
- decoration 文字劃線：下劃線、上劃線道川、中劃線
- decorationColor 劃線顏色
- decorationStyle 劃線樣式：虛線午衰、雙線等
Text 文本
正常字體
Text(
'正常文本'
)
下劃線，中劃線
image.png
Text(
'下劃線文本',
style: TextStyle(
decoration: TextDecoration.underline
),
),
Text(
'中劃線文本',
style: TextStyle(
decoration: TextDecoration.lineThrough
),
),
Text(
'上劃線文本',
style: TextStyle(
decoration: TextDecoration.overline
),
),
粗體
image
Text(
'加粗文本',
style: TextStyle(
fontWeight: FontWeight.bold
),
),
Text(
'加粗文本',
style: TextStyle(
fontWeight: FontWeight.w200
),
),
斜文本
image.png
Text(
'斜體文本',
style: TextStyle(
fontStyle: FontStyle.italic
),
),
字體大小
image
Text(
'大號(hào)文本',
style: TextStyle(
fontSize: 30
),
),
Text(
'中號(hào)文本',
style: TextStyle(
fontSize: 20
),
),
Text(
'小號(hào)文本',
style: TextStyle(
fontSize: 10
),
),
-
textAlign 設(shè)置文本對(duì)齊冒萄。多行文本才能表現(xiàn)出來(lái)
image textDirection 文本方向臊岸。
softWrap 是否自動(dòng)換行，默認(rèn)為 true
-
overflow 溢出時(shí)如何展示宦言。
image
ellipsis 和 clip 都和 css 一樣扇单，fade 有一個(gè)半透明的效果
textScaleFactor 字體縮放
maxLines 最大顯示行
semanticsLabel 語(yǔ)義化
如果需要顯示富文本需要使用 Text.rich 和 textSpan
image
Text.rich(
TextSpan(
style: TextStyle(
color: Colors.red
),
text: 'hello world',
children: [
TextSpan(
style: TextStyle(
color: Colors.blue
),
text: 'hello world'
)
]
)
);
這么展示富文本也太費(fèi)勁了。
Image
return Image.asset(
'assets/images/title.png',
semanticLabel: '這是一張 title 圖片',
excludeFromSemantics: false,
width: 60,
height: 60,
fit: BoxFit.contain,
alignment: Alignment.bottomCenter,
matchTextDirection: true,
filterQuality: FilterQuality.high
);
屬性
- semanticLabel 圖片語(yǔ)義化奠旺。類似 image 的 alt 屬性蜘澜。
- excludeFromSemantics 不提供圖片的語(yǔ)義施流，默認(rèn)是 false。對(duì)于對(duì) app 沒(méi)有意義的圖片使用鄙信。
- width 寬度
- height 寬度
- color 會(huì)和圖片像素重合瞪醋。
- colorBlendMode [ color ] 和 圖片的混合方式。[ color ] 是源, 圖片是目標(biāo)装诡。
- fit 控制圖片的布局银受，類型是 BoxFit。 可選值為 BoxFit[ fill, contain, cover, fitWidth, fitHeight, none, scaleDown ]鸦采。
- alignment 對(duì)齊方式宾巍。類型是 Alignment。
- repeat 重復(fù)方式渔伯。取值 ImageRepeat顶霞。
- centerSlice 不能和 fit 同時(shí)設(shè)置。指定中心區(qū)域進(jìn)行九個(gè)補(bǔ)丁圖像锣吼，在中心切片內(nèi)的圖像區(qū)域?qū)⑺胶痛怪崩煅』耄允箞D像適合其目的地。 中心切片上方和下方的圖像區(qū)域?qū)H水平拉伸玄叠，而中心切片左側(cè)和右側(cè)的圖像區(qū)域僅垂直拉伸古徒。應(yīng)該是設(shè)置九宮格圖片用的。
- matchTextDirection 如果是在文本中读恃，是否根據(jù)文本方向翻轉(zhuǎn)圖片隧膘。
- gaplessPlayback 當(dāng)圖像提供者發(fā)生變化時(shí)，是繼續(xù)顯示舊圖像寺惫，默認(rèn)不顯示舀寓！
- filterQuality 圖片過(guò)濾器, 類型 FilterQuality。 可選值為: [ none, low, medium, high ]肌蜻，默認(rèn)是 low。
創(chuàng)建圖片容器的方法有下面幾種：
- new Image.asset 展示本地圖片
return Image.asset(
'assets/images/title.png'
);
- new Image.network
return Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553355447588&di=7df0e766c457cd950a09f3c3d016cb9a&imgtype=0&src=http%3A%2F%2Fdn-p-tystore.qbox.me%2Fp%2Fchapter%2Fattachment%2FEtIUE_bte-%2FEgfvEBITe_-W4B6ve_2wElu16gjT7UL68vmn6MiB6m9tJh9pHUfV9t2.jpg'
);
- new Image.file 展示從 [ file ] 中獲取的圖片
- new Image memory 展示從 [Uint8List] 中獲取的圖片
Icon
return Icon(
Icons.star,
color: Colors.red,
);
Icons 提供了很多內(nèi)置的圖標(biāo)必尼，如果需要?jiǎng)e的圖標(biāo)可以借鑒 ：
https://blog.csdn.net/kangshaojun888/article/details/86719741
Placeholder 占位符
image
return Placeholder(
color: Colors.red, // 顏色
strokeWidth: 2.0, // 線條的寬度
fallbackHeight: 100,
fallbackWidth: 100, // 當(dāng)占位符處于寬度無(wú)界的情況時(shí)使用的寬度蒋搜。
);