@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 水平垂直居...