Flutter必備 Flex布局完全解讀

0.前言

flex布局是flutter的五虎上將之一,虎父無犬子，其子row和column也能力非凡

你有沒有被mainaxisalignment，crossaxisalignment弄得暈頭轉向,本文將助你將他們納入麾下。

先看一下父子三人在flutter布局體系中的位置:多子元件布局

1.flex的屬性一覽

屬性名型別

預設值簡介

direction

axis

@required

軸向mainaxisalignment

mainaxisalignment

start

主軸方向對齊方式

crossaxisalignment

crossaxisalignment

center

交叉軸方向對齊方式

mainaxissize

mainaxissize

max主軸尺寸

textdirection

textdirection

null

文字方向

verticaldirection

verticaldirection

down

豎直方向

textbaseline

textbaseline

null

基線型別

children

list

內部孩子

2.軸向:direction:axis

enum axis 

複製**

也就是水平排放還是豎直排放，可以看出缺省情況下都是主軸頂頭,交叉軸居中

比如horizontal下主軸為水平軸，交叉軸則為豎直。也就是水平頂頭，豎直居中

這裡使用multishower快速展示,更好的對比出不同之處，multishower詳見

var direction =[axis.horizontal,axis.vertical];

var show = multishower(direction,(e),color: colors.black12,width: 300,height: 200);
var redbox= container(
color: colors.red,
height: 50,
width: 50,
);var bluebox= container(
color: colors.blue,
height: 30,
width: 60,
);var yellowbox= container(
color: colors.yellow,
height: 50,
width: 100,
);var greenbox= container(
color: colors.green,
height: 60,
width: 60,
);複製**

主軸方向的排布規則,這裡以水平為例，主軸為水平方向。豎直模擬即可

enum mainaxisalignment ,color: colors.black12,width: 200,height: 150);

return show;
}複製**

enum crossaxisalignment 

複製**

還是水平為例，交叉軸便是豎軸，這裡可以看出他們的布局行為

其中需要注意的是crossaxisalignment.baseline使用時必須有textbaseline

其中textbaseline確定對齊的是那種基線,分為alphabetic和ideographic

testcrossaxisalignment

(),color: colors.black12,width: 200,height: 140);
return show;
}複製**

enum mainaxissize 

複製**

當父容器的寬未約束,flex缺省會將自身盡可能延伸，這便是mainaxissize.max

此時改為mainaxissize.min時,它不會延伸自己的區域，自會包裹內容

testmainaxissize

()複製**

enum textdirection 

複製**

這個非常好理解，不多言了

testtextdirection

(),color: colors.black12,width: 200,height: 140);
return show;
}複製**

enum verticaldirection

複製**

testverticaldirection

(),color: colors.black12,width: 200,height: 140);
return show;
}複製**

enum textbaseline 

複製**

testtextbaseline

(),color: colors.black12,width: 300,height: 140);
return show;
}複製**

至此，flutter中的flex布局就已經完全解讀完了。

其中flutter的孩子row是direction: axis.horizontal,column是direction: axis.vertical,

其他的屬性都是類似的，相當於flex的簡化版，所以flex在手，天下我有。

還要一點是關於expanded，也比較保用，它能與flex布局結合，變更孩子尺寸

c1:綠色  c2:紅色  c3:黃色

1).expanded--c2：c1和c3將不變，c2延伸自己佔滿剩餘部分
2).同時expanded--c2和c3，最終c2和c3的長度是一樣的
3).同時expanded--c1，c2和c3，最終c1,c2，c3長度都是一樣的
複製**

9.用flex布局寫個小例子

光說不練假把式,光練不說空把式,下面就用乙個布局來實際看一下flex的強大

1.由上中下三行，可以用column

2.第一行由圖示，文字和文字組成，其中兩頭分處左右，可以用expanded處理  
3.中間比較複雜由乙個row中包含兩部分，左邊是乙個兩行column的內容,右邊是文字  
4.底部是乙個row,主軸對齊是start
複製**

showitem

() 複製**

Flutter必備 Flex布局完全解讀

flex布局是flutter的五虎上將之一,虎父無犬子，其子row和column也能力非凡 你有沒有被mainaxisalignment，crossaxisalignment弄得暈頭轉向,本文將助你將他們納入麾下。先看一下父子三人在flutter布局體系中的位置 多子元件布局 enum axis也就...

Flutter 布局類元件 彈性布局 Flex

彈性布局允許子元件按照一定比例來分配父容器空間，flutter中的彈性布局主要通過flex和expanded來配合實現。flex元件可以沿著水平或垂直方向排列子元件，如果你知道主軸方向，使用row或column會方便一些，因為row和column都繼承自flex，引數基本相同，所以能使用flex的地...

淺嚐flutter中的flex布局

假設你已經掌握了flutter的一些基礎知識，比如環境搭建，簡單的dart語法，及flutter元件化思想。那麼你適合閱讀本篇教程，本教程演示一些flutter中的flex用法的簡單示例.在不懂height 170.0,width 100.0如何適配不同解析度的時候，只能用flex搞事情，所以咱看看...