Flutter 基礎篇(五) Text 元件

2021-09-28 16:46:44 字數 1527 閱讀 6017

text元件用於顯示簡單樣式文字,它包含一些控制文字顯示的屬性。其中,它有乙個必須的引數,就是文字字串。

void main()

@override

widget build(buildcontext context)

}

執行結果,在螢幕**顯示了jonas

除此以外,常用的屬性還有:

textalign.left—— 左對齊(預設值)

textalign.right—— 右對齊

textalign.center—— 居中

textalign.justify—— 兩端對齊

textdirection.ltr—— 從左往右(預設值)

textdirection.rtl—— 從右往左

textoverflow.clip—— 直接截斷

textoverflow.ellipsis—— 顯示省略號

textoverflow.fade—— 文字顏色蛻變

textoverflow.visible—— 文字可見的 (預設值)

color—— 文字的顏色,可選值可以是colors中的預定義顏色,也可以是color.fromargb(a, r, g, b)color.fromrgbo(r, g, b, opacity)fontsize—— 文字字型大小,單位為pxheight—— 行高,值是乙個因子,具體的行高 = 因子 *fontsizefontfamily—— 字型族

backgroundcolor—— 背景色

fontweight—— 字型粗細

letterspacing—— 字元間距

wordspacing—— 詞間距

fontstyle—— 設定斜體

decoration—— 文字裝飾線,可選值:textdecoration.underline表示下劃線,textdecoration.overline表示上劃線,textdecoration.linethrough表示刪除線,textdecoration.none表示不使用裝飾線(預設值)

decorationcolor—— 文字裝飾線顏色,可選值同顏色。

decorationstyle—— 文字裝飾線的線型

Flutter 基礎篇(十一) 布局元件

布局元件是指包含乙個或多個子元件的元件,不同的布局元件對子元件的排列方式不同。在前面的文章有提到,element樹才是最終的繪製樹,它是由widget樹來建立的,widget只是element的配置資料。在flutter中,根據widget是否需要包含子節點將widget分為三類,分別對應三種ele...

Flutter 基礎篇(十三) 彈性布局

彈性布局,不是flutter特有的一種布局方式,在前端的各個領域中都存在,比如瀏覽器端通過flex來實現彈性布局。在flutter中,主要通過flex和expanded來實現彈性布局。flex元件可以沿著水平或垂直方向排列的子元件,如果你明確了主軸的方向,那麼更加應該使用row或column來代替f...

Flutter 基礎篇(十四) 流式布局

在前面討論到的所有布局容器裡面,都沒有考慮元素溢位的問題,比如 row children text jonas 100 顯然,一行肯定無法顯示下這麼長的文字,然而,row給出的處理方式是 丟擲錯誤!flex row column都存在這樣的問題,所以,如果需要考慮溢位場景的時候,應該使用流式布局元件...