天天看點

Flutter元件之文本(Text)

文本元件(Text)負責顯示文本和定義顯示樣式,常用屬性如下:

屬性名 類型 預設值 說明
data String 資料為要顯示的文本
maxLines int 文本顯示的最大行數
style TextStyle null 文本樣式,可定義文本的字型大小、顔色、粗細等
textAlign TextAlign TextAlign.center 文本水準方向對齊方式,取值有center、end、justify、left、right、start、values
textDirection TextDirection TextDirection.ltr 有些文本書寫的方向是從左到右,比如英語、泰米爾語、中文,有些則是從右到左,比如亞拉姆語、希伯來語、烏爾都語。從左到右使用TextDirection.ltr,從右到左使用TextDirection.rtl
textScaleFactor double 1.0  字型縮放系數,比如,如果此屬性設定的值為1.5,那麼字型會放大150%,也就是說比原來的大了50%
textSpan TextSpan null 文本塊,TextSpan裡可以包含文本内容及樣式
softWrap bool TRUE 某一行中文本過長,是否需要換行。預設為true,如果為false,則文本中的字形将被定位為好像存在無限的水準空間。
overflow TextOverflow TextOverflow.clip

TextOverflow.clip:剪切溢出的文本以修複其容器。

TextOverflow.ellipsis:使用省略号表示文本已溢出。

TextOverflow.fade:将溢出的文本淡化為透明。

TextStyle style

屬性名 說明
Color color

文本顔色。

如果指定了foreground,則此值必須為null。

TextDecoration decoration

繪制文本裝飾:

下劃線(TextDecoration.underline)

上劃線(TextDecoration.overline)

删除線(TextDecoration.lineThrough)

無(TextDecoration.none)

Color decorationColor 繪制文本裝飾的顔色。
TextDecorationStyle decorationStyle

繪制文本裝飾的樣式:

畫一條虛線 TextDecorationStyle.dashed

畫一條虛線 TextDecorationStyle.dotted

畫兩條線 TextDecorationStyle.double

畫一條實線 TextDecorationStyle.solid

畫一條正弦線(波浪線) TextDecorationStyle.wavy

FontWeight fontWeight

繪制文本時使用的字型粗細:

FontWeight.bold 常用的字型重量比正常重。即w700

FontWeight.normal 預設字型粗細。即w400

FontWeight.w100 薄,最薄

FontWeight.w200 特輕

FontWeight.w300 輕

FontWeight.w400 正常/普通/平原

FontWeight.w500 較粗

FontWeight.w600 半粗體

FontWeight.w700 加粗

FontWeight.w800 特粗

FontWeight.w900 最粗

FontStyle fontStyle

字型變體:

FontStyle.italic 使用斜體

FontStyle.normal 使用直立

TextBaseline textBaseline

對齊文本的水準線:

TextBaseline.alphabetic:文本基線是标準的字母基線

TextBaseline.ideographic:文字基線是表意字基線;如果字元本身超出了alphabetic 基線,那麼ideograhpic基線位置在字元本身的底部。

String fontFamily 使用的字型名稱(例如,Roboto)。如果字型是在包中定義的,那麼它将以'packages / package_name /'為字首(例如'packages / cool_fonts / Roboto')
double fontSize 字型大小(pt、sp),預設為14個邏輯像素(14pt、14sp)
double letterSpacing 水準字母之間的空間間隔(邏輯像素為機關)。可以使用負值來讓字母更接近。
double wordSpacing 單詞之間添加的空間間隔(邏輯像素為機關)。可以使用負值來使單詞更接近。
double height 文本行與行的高度,作為字型大小的倍數(取值1~2,如1.2)
Locale locale 此屬性很少設定,用于選擇區域特定字形的語言環境
Paint background 文本背景色
Paint foreground 文本的前景色,不能與color共同設定(比文本顔色color差別在Paint功能多,後續會講解)
List<Shadow> shadows 詳解:Flutter Decoration背景設定(邊框、圓角、陰影、形狀、漸變、背景圖像等)

TextAlign textAlign

屬性名 說明
TextAlign.center 将文本對齊容器的中心。
TextAlign.end 對齊容器後緣上的文本。
TextAlign.justify 拉伸以結束的文本行以填充容器的寬度。即使用了decorationStyle才起效
TextAlign.left 對齊容器左邊緣的文本。
TextAlign.right 對齊容器右邊緣的文本。
TextAlign.start 對齊容器前緣上的文本。