在Flutter中有一些布局,比如今天要說的Row/Column布局,看字面意思就是我們熟知的橫向布局和縱向布局.
先說一下構(gòu)造方法:
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
Row和Column的構(gòu)造方法是一樣的,用法也是一樣的,就是方向上不同,我們對屬性每一個(gè)去介紹:
- MainAxisAlignment:主軸的對齊方式,什么是主軸呢?如果當(dāng)前是按照Row組件,那么主軸就是水平的,如果當(dāng)前是Row的布局,那么主軸就是水平的:
| 屬性名稱 | 樣式 |
|---|---|
| start | 內(nèi)部的子組件將從主軸起始位置開始排列(正向排列) |
| end | 內(nèi)部的子組件將從主軸末尾位置開始排列(反向排列) |
| center | 內(nèi)部的子組件將從主軸中間位置開始排列(居中) |
| spaceBetween | 內(nèi)部的首尾子組件靠近首尾兩端，其余子組件居中排列且組件間的間距一樣 |
| spaceAround | 內(nèi)部的子組件居中排列，且每個(gè)子組件的左右邊距一樣大 |
| spaceEvenly | 內(nèi)部的子組件居中顯示，每個(gè)空間的左邊和右邊都有相同的間距 |
MainAxisAlignment.png
2.mainAxisSize:這個(gè)屬性用來設(shè)置 Row/Column 布局的寬高值，有兩個(gè)值可以設(shè)置:
| 屬性名稱 | 樣式 |
|---|---|
| max | 整個(gè)控件占據(jù)的最大值 |
| min | 整個(gè)控件占據(jù)的最小值 |
mainAxisSize的max.png
mainAxisSize的min.png
- crossAxisAlignment:這個(gè)屬性用來控制非主軸的對齊方式:
| 屬性名稱 | 樣式 |
|---|---|
| start | 內(nèi)部的子組件將從非主軸起始位置開始排列（正向排列） |
| end | 內(nèi)部的子組件將從非主軸末尾位置開始排列（反向排列） |
crossAxisAlignment.png
- textDirection:這個(gè)屬性用來控制 Row 布局中內(nèi)部子組件的擺放順序:
| 屬性名稱 | 樣式 |
|---|---|
| TextDirection.ltr | 從左至右排列 |
| TextDirection.rtl | 從右至左排列 |
textDirection.png
- verticalDirection:這個(gè)屬性用來控制 Column 布局中內(nèi)部子組件的擺放順序:
| 屬性名稱 | 樣式 |
|---|---|
| VerticalDirection.up | 從下至上排列 |
| VerticalDirection.down | 從上至下排列 |
verticalDirection.png
- textBaseline:這個(gè)屬性也是用來設(shè)置子組件對齊的，只不過對齊的是字符的基線:
| 屬性名稱 | 樣式 |
|---|---|
| TextBaseline.ideographic | 用于對齊表意字符的水平線 |
| TextBaseline.alphabetic | 用于對齊字母字符的水平線 |
需要注意的是,這個(gè)需要配合 crossAxisAlignment 屬性來使用，來看一下具體的效果.
textBaseline.png
想了解更多Flutter學(xué)習(xí)知識請聯(lián)系:QQ(814299221)
