Flutter-Widget-Text控件
Text控件十分常用,需要使用到文字的時候就會用到它,看一下它擁有的屬性
1. 其構造方法如下:
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);
2. 屬性說明
屬性 | 說明 |
---|---|
data | 第一個參數,不指定名稱,輸入要顯示的字符串 |
style | 文字風格:文字風格有: inherit : 默認爲true,如果指定爲false,那麼後面的屬性沒有顯示指定則會使用默認值:白色,字體大小爲10像素,無襯線字體。 color : 文字顏色 fontSize : 文字大小 fontWeight : 文字粗程度,有bold,w100-w900之間, fontStyle: 文字風格,有斜體和正常 letterSpacing : 文字之間距離 wordSpacing : 單詞之間的距離,比如文字中的Hello world兩個單詞間距離 textBaseline : 基線對齊方式(沒看出太大區別) height : 文本高度跨度,字體大小的倍數 locale : 本地化:語言,國家 foreground :前景,比如文字顏色,如果前面color屬性有設置,那麼這個屬性需要時null,所以使用這個屬性的時候,color就不要使用了 background : 背景,比如文字後背景,backgroundColor衝突,用這個的時候color就不能使用 shadows : 陰影(我沒看出啥效果- -) decoration : 裝飾:比如下劃線 decorationStyle : 裝飾風格: 比如下劃線爲虛線 debugLabel : 調試標籤(我在flutter_web裏沒看出有啥效果) fontFamily : 字體(flutter_web里根據FontManifest來配置) fontFamilyFallback : 文字字體列表,如果前面的fontFamily提供了,以fontFamily爲準,如果沒有提供,則使用該列表第一個元素作爲字體,都沒提供則使用默認字體(- -fontFamily沒提供的時候,沒試出效果) package : 包路徑,比如指明存儲字體文件的路徑,在flutter_web裏,文字字體路徑似乎可以不用這個,只需要配置FontManifest.json |
textAlign | 水平方向文字從哪邊開始排,比如下面右邊 |
textDirection | 文字順序方向,比如從右到左 |
locale | 本地化字符編碼,一般不設置 |
softWrap | 是否換行,默認true |
overflow | 文字超出超出後的方式:比如常用的,在後面加…,設置了這個…的時候,默認就只有一行了(可通過設置maxLines增加行) |
textScaleFactor | 字體像素的倍數,比如0.5,就是在前面設置了的字體大小基礎上爲0.5倍 |
maxLines | 最大行數 |
semanticsLabel | 語義標籤 ,做一個標籤,按註釋如果存在則替換文本(flutter_web測試沒看出啥實際效果 - -) |
3. 測試代碼:
new Text(
r'$$ 北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻 北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻 北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻,北鼻北鼻',
style: TextStyle(
inherit: true,
//文字顏色
// color: Color.fromARGB(255, 22, 212, 22),
//背景顏色
// backgroundColor: Colors.greenAccent,
//文字大小
fontSize: 25.0,
//文字粗細程度
fontWeight: FontWeight.w500,
//文字風格
// fontStyle: FontStyle.italic,
//文字之間距離
letterSpacing: 5.0,
//單詞之間的距離,比如文字中的Hello world
wordSpacing: 30.0,
//基線對齊方式
textBaseline: TextBaseline.ideographic,
//文本高度跨度,字體大小的倍數,比如以下爲5倍,設置背景後就能看出來
height: 5.0,
//本地化:語言,國家
locale: /* Localizations.localeOf(context) */ Locale('fr', 'CA'),
//前景,比如文字顏色,如果前面color屬性有設置,那麼這個屬性需要時null,所以使用這個屬性的時候,color就不要使用了
foreground: paint,
//背景,比如是文字後背景,backgroundColor衝突,用這個的時候color就不能使用
background: paintBackground,
//陰影
shadows: listShadow,
//裝飾:下劃線
decoration: TextDecoration.underline,
//裝飾風格:下劃線虛線
decorationStyle: TextDecorationStyle.dashed,
//調試標籤?
debugLabel: "11111",
//文字字體
// fontFamily: "TXKS",
//文字字體
fontFamilyFallback: familyFallBackList,
//包路徑,指明存儲字體文件的路徑,在flutter_web裏,似乎可以不用,只需要配置FontManifest.json
// package: "assets/fonts"
),
//水平方向文字從哪邊開始排,比如下面右邊
textAlign: TextAlign.right,
//文字順序方向,比如從右到左
textDirection: TextDirection.ltr,
//本地化字符編碼,一般不設置
locale: Localizations.localeOf(context),
//是否換行,默認true
softWrap: true,
//文字超出超出後的方式:比如常用的,在後面加...,設置了這個的時候,默認就只有一行了(可通過設置maxLines增加行)
overflow: TextOverflow.ellipsis,
//字體像素的倍數,比如0.5,就是在前面設置了的字體大小基礎上爲0.5倍
textScaleFactor: 0.5,
//最大行數
maxLines: 2,
//語義標籤 ,做一個標籤,如果存在則替換文本,flutter_web測試沒看出啥實際效果
semanticsLabel: 'Double dollars',
)