主題

本文將介紹，flutter中的row，colum的用法。通俗來說，就是橫向布局和縱向布局的用法。

開發(fā)環(huán)境

win10
androidstudio2022.1.1
jdk11
fluttersdk-flutter_windows_3.7.8

源碼

文末將會附上完整開源demo地址

開發(fā)過程

首先，這里的Row，Colum的布局，就類似于安卓的LinearLayout，使用orientation屬性，控制布局方向。
Row是水平方向布局，用Row布局，正常顯示情況如下圖：

Colum是垂直方向布局，用Colum布局，正常顯示情況如下圖：

可以看到是布局方向是有所區(qū)別的。

下面將列出這兩個(gè)控件中的屬性：

MainAxisAlignment：

當(dāng)前對齊方向的主軸，例如row，主軸就是水平橫線

• spaceBetween：使中間的各個(gè)子控件間距相等
• start：子控件放在主軸開始位置（類似于android默認(rèn)Linearlayout排列規(guī)則）
• end：將子控件放在主軸的結(jié)束位置
• center：將子控件放在主軸的中間位置
• spaceEvenly：將主軸空白區(qū)域均分，使各個(gè)子控件間距相等
• spaceAround：表示每個(gè)組件兩邊的富余空間相等

CrossAxisAlignment:

當(dāng)前對齊方向的垂直交叉軸，例如row，交叉軸就是豎直方向

• start：交叉軸開始地方
• end：交叉軸結(jié)束地方
• center：交叉軸居中地方
• stretch：使子控件填滿交叉軸
• baseline：交叉線處對齊，配合textBaseline使用，作用于文本

TextBaseline：

文本對齊
alphabetic:設(shè)置的是文本基線參照英文
ideographic:設(shè)置的是文本基線參照中文
兩個(gè)屬性差異不大

MainAxisSize:

控件大小，row則為水平大小，col則為垂直方向大小
MainAxisSize.min：控件盡可能小
MainAxisSize.max：控件填充滿–默認(rèn)

VerticalDirection:

豎直方向?qū)R方式
down:從上到下
up:從下到上

其實(shí)日常的使用中，使用較多的屬性，應(yīng)該是MainAxisAlignment，MainAxisSize。
MainAxisSize對應(yīng)就是安卓布局中的wrap_content和match_parent。
MainAxisAlignment則為子布局的對齊方式。

最后，如果想要真正了解row和colum布局，其實(shí)單單看文章是不建議的，一定要自己手動敲一次代碼，再去總結(jié)，才會記憶深刻。

最后，源碼地址如下：
https://gitee.com/motosheep/flutter-demo
切換到分支：202303281729RowCol控件

到此這篇關(guān)于Flutter學(xué)習(xí)筆記(三)RowColum布局的文章就介紹到這了,更多相關(guān)Flutter學(xué)習(xí)RowColum布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論