更多文章請檢視futter從入門 到精通
水準和垂直布局詳解
在原生Android開發中,我們經常會用LinearLayout來達到水準或垂直方向的布局,
在原生IOS 開發中,水準或垂直方向的布局,隻需要通過計算位置,通過設定frame來實作,
在Flutter中使用Row和Column元件來實作水準或垂直方向的布局,Row元件主要功能是處理水準方向的布局,Column元件主要功能是處理垂直方向的布局。
<col>
Android原生
Flutter
LinearLayout 裡面的android:orientation="horizontal”
Row元件
LinearLayout 裡面的 android:orientation="vertical”
Column元件
垂直方向排列 a b c
水準方向排列 a b c
對于Android 原生來講 LinearLayout android:orientation=“horizontal”
對就 Flutter 中的 Row
對于Android 原生來講 LinearLayout android:orientation=“vertical”
對就 Flutter 中的 Column
對于Android 原生來講 LinearLayout
垂直方向 水準方向 全部是 自适應的效果 對就 Flutter 中 Column Row
在Android 中,LinearLayout通過 gravity屬性來規範 子View的對齊方式,
在Flutter中我們可以使用 Row/Column元件 的 MainAxisAlignment 以及 CrossAxisAlignment 實作控件的對齊效果。
Row 的主軸為水準方向,那麼它的交叉軸為垂直方向.
Column 的主軸為垂直方向,那麼它的交叉軸為水準方向.
MainAxisAlignment 有6個屬性值,預設值為start
CrossAxisAlignment 有5個屬性值,預設值為center,分别是:
在Android中 layout_weight 是LinearLayout裡面的屬性,它是用來給子布局設定權重的,表示給布局按照設定的比例去配置設定空間。
在Flutter中我們可以使用 Expanded 包裹Row或Column元件,使用 Expanded 元件裡面的 flex屬性 去實作同樣的效果。
在水準方向上,三個子View 平均配置設定空間
在Flutter中的Row或Column中關于 direction ,
textDirection 的屬性值為 TextDirection.ltr,表示所有的子控件都是從左到右順序排列,這是預設值。如果為TextDirection.rtl 表示從右邊開始向左邊倒序排列。
verticalDirection 的屬性值為 VerticalDirection.down, 表示所有的子控件都是從上到下順序排列。如果為VerticalDirection.up 從底部開始向上倒序排列。
【1】 目前在西瓜視訊上免費刊登 Flutter 系列教程,每日更新,歡迎關注接收提醒點選檢視提示
【2】 本公衆号會首發系列專題文章,付費的視訊課程會在公衆号中免費刊登,在你上下班的路上或者是睡覺前的一刻,本公衆号都是你浏覽知識幹貨的一個小選擇,收藏不如行動,在那一刻,公衆号會提示你該學習了。