天天看點

Flutter Row和 Column 布局、線性布局概述

​​更多文章請檢視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

Flutter Row和 Column 布局、線性布局概述

水準方向排列 a b c

Flutter Row和 Column 布局、線性布局概述

對于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 布局、線性布局概述

在Flutter中的Row或Column中關于 direction ,

textDirection 的屬性值為 TextDirection.ltr,表示所有的子控件都是從左到右順序排列,這是預設值。如果為TextDirection.rtl 表示從右邊開始向左邊倒序排列。

verticalDirection 的屬性值為 VerticalDirection.down, 表示所有的子控件都是從上到下順序排列。如果為VerticalDirection.up 從底部開始向上倒序排列。

【1】 目前在西瓜視訊上免費刊登 Flutter 系列教程,每日更新,歡迎關注接收提醒​​點選檢視提示​​

【2】 本公衆号會首發系列專題文章,付費的視訊課程會在公衆号中免費刊登,在你上下班的路上或者是睡覺前的一刻,本公衆号都是你浏覽知識幹貨的一個小選擇,收藏不如行動,在那一刻,公衆号會提示你該學習了。

繼續閱讀