Flutter基礎控制項 Row,Column

2021-10-08 11:38:30 字數 2640 閱讀 6023

@tocrow

行,以水平方式排列其內部children widget。

若需要使其內部某個children widget填充滿剩餘空間,可使用expanded包裹該元件。

void

main()

=>

(new()

);//statelesswidget 無狀態widget

class

extends

statelesswidget

}

row的布局有六個步驟,這種布局表現來自flex(row和column的父類):

子元件沿著 main 軸(在 row 中是橫軸)如何擺放,其實就是子元件排列方式,可選值有:

mainaxisalignment.start:靠左排列。

mainaxisalignment.end:靠右排列。

mainaxisalignment.center:居中排列。

mainaxisalignment.spacearound:每個子元件左右間隔相等,也就是 margin 相等。

mainaxisalignment.spacebetween:兩端對齊,也就是第乙個子元件靠左,最後乙個子元件靠右,剩餘元件在中間平均分散排列。

mainaxisalignment.spaceevenly:每個子元件平均分散排列,也就是寬度相等。

main 軸大小,可選值有:

mainaxissize.max

mainaxissize.min

chidren widget沿著 cross 軸(在 row 中是縱軸)擺放,其實就是子元件對齊方式,可選值有:

crossaxisalignment.start:子元件在 row 中頂部對齊。

crossaxisalignment.end:子元件在 row 中底部對齊。

crossaxisalignment.center:子元件在 row 中居中對齊。

crossaxisalignment.stretch:拉伸填充滿父布局。

crossaxisalignment.baseline:在 row 元件中會報錯。

chidren widget水平排列順序,可選值有:

textdirection.ltr:從左往右開始排列。

textdirection.rtl:從右往左開始排列。

chidren widget垂直排列順序,可選值有:

verticaldirection.up

verticaldirection.down

這裡不做解釋可以去看baseline。

body:

newcenter

( child:

newrow

( children:

[new

iconbutton

( icon:

newicon

(icons.menu)

, tooltip:

'button'

, onpressed:

null),

newexpanded

( child:

newtext

('yayayay'

, style:

textstyle

( fontsize:

35.0

, background:

paint()

..color = colors.red[50]

),),

),newexpanded

( child:

newtext

('aaaaaaaaaaaaa1'

, style:

textstyle

(// 建立 paint 物件,設定 color 屬性為想要的顏色

background:

paint()

..color = colors.red),)

,),]

,//從右邊往左邊開始排列

textdirection: textdirection.rtl,

//對齊字元底部的水平線 好像沒卵用

textbaseline: textbaseline.alphabetic,),

),

關於字元的baseline,可以看下下面這張圖,這具體就涉及到了字型排版,感興趣的同學可以自行了解。

1.2 布局行為

baseline控制項布局行為分為兩種情況:

如果child有baseline,則根據child的baseline屬性,調整child的位置;

如果child沒有baseline,則根據child的bottom,來調整child的位置。

Flutter入門 (三)基礎控制項

上篇文章講解了兩種widget,這篇文章主要講解一下常用的基礎控制項的使用方法。主要包含image icon rawimage assetbundle。以下以image的講解為例。object diagnosticable diagnosticabletree widget statefulwidg...

Flutter控制項 Container

container 乙個方便的 widget,它組合了常見的繪畫 定位和大小的 widget,在flutter中非常常見。顏色,邊框,填充形狀,陰影,漸變色,背景。container 首先會使用 padding 來圍繞在 child 周圍 也包括 decoration 中存在的邊框 新增額外的約束限...

flutter之Align控制項

align控制項即對齊控制項,能將子控制項所指定方式對齊,並根據子控制項的大小調整自己的大小。對齊子控制項的方式 bottomcenter 0.5,1.0 底部中心 bottomleft 0.0,1.0 左下角 bottomright 1.0,1.0 右下角 center 0.5,0.5 水平垂直居...