前言
本文我們要介紹 Flutter 中布局 Widget，包括彈性布局、線性布局
流式布局和層疊布局。
一、彈性布局--Flex
Flex 類似 Android 中的 FlexboxLayout，和 Expanded 配合使用可以實(shí)現(xiàn)子Widget 按照一定比例來分配父容器空間。
- 使用：
Flex(
direction: Axis.horizontal,
children: <Widget>[
...
],
)
其中direction：主軸的方向，是必選參數(shù)，它的類型是 Axis，有以下兩種值：
（1）Axis.horizontal：主軸方向?yàn)樗椒较颍敲醋覹idget 就會(huì)沿水平方向排列，交叉方向是垂直方向。
（2）Axis.vertical：主軸方向?yàn)榇怪狈较颍敲醋覹idget 就會(huì)沿垂直方向排列，交叉方向是水平方向。
- Flex 的構(gòu)造函數(shù)及參數(shù)說明
class Flex extends MultiChildRenderObjectWidget {
Flex({
Key key,
@required this.direction,//必選；類型 Axis；主軸的方向
this.mainAxisAlignment = MainAxisAlignment.start,//可選；類型 MainAxisAlignment；表示子Widget在主軸的對(duì)齊方式
this.mainAxisSize = MainAxisSize.max,//可選；類型 MainAxisSize；表示主軸應(yīng)該占用多大的空間，分為mix 和 max
this.crossAxisAlignment = CrossAxisAlignment.center,//可選；類型 CrossAxisAlignment；表示子Widget在交叉軸的對(duì)齊方式
this.textDirection,//可選；類型 TextDirection；表示子Widget在主軸方向上的布局順序，分為rtl：從右到左 和 ltr：從左到右
this.verticalDirection = VerticalDirection.down,//可選；類型 VerticalDirection；表示子Widget在交叉軸方向上的布局順序
this.textBaseline,//可選；類型 TextBaseline；排列子Widget 時(shí)使用哪個(gè)基線
List<Widget> children = const <Widget>[],//可選；類型 List< Widget>；Flex布局 里排列的內(nèi)容
}) : assert(direction != null),
assert(mainAxisAlignment != null),
assert(mainAxisSize != null),
assert(crossAxisAlignment != null),
assert(verticalDirection != null),
assert(crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null),
super(key: key, children: children);
...
}
- Flexible 與 Expanded
為了避免子Widget 在 Row、Column、Flex中超屆，就可以使用 Flexible 和 Expanded，當(dāng)子Widget 要超過主軸的大小時(shí)，會(huì)自動(dòng)換行。其中 Expanded 是 Flexible 的子類。
Flexible(
child: Text('內(nèi)容'),
)
//或
Expanded(
child: Text('內(nèi)容'),
)
（1）Flexible 的構(gòu)造函數(shù)及參數(shù)說明：
class Flexible extends ParentDataWidget<Flex> {
const Flexible({
Key key,
this.flex = 1, //可選；類型 int；此 Widget的彈性因子
this.fit = FlexFit.loose,//可選；類型 FlexFit；如何分配彈性Widget在可用空間里的大小
@required Widget child,//必選；類型 Widget；要顯示的Widget
}) : super(key: key, child: child);
...
}
（2）Expanded 的構(gòu)造函數(shù)及參數(shù)說明：
class Expanded extends Flexible {
/// Creates a widget that expands a child of a [Row], [Column], or [Flex]
/// expand to fill the available space in the main axis.
const Expanded({
Key key,
int flex = 1,
@required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}
（3）Flexible 與 Expanded 的區(qū)別：
fit 參數(shù)不同，Expanded 用的是默認(rèn)的，當(dāng)還有剩余空間的時(shí)候，會(huì)占滿剩余的全部空間。而 Flexible 用的是 FlexFit.loose，只占用自身大小的空間。
（4）flex 彈性系數(shù)：
當(dāng) flex 為0或null，則 child 是沒有彈性的，稱為非彈性子Widget，非彈性子Widget的大小就是其本身的大小，不會(huì)被擴(kuò)展去占用多余的空間 。
當(dāng) flex 大于0時(shí)，child 是有彈性的，稱為彈性子Widget，首先會(huì)計(jì)算出第一步所有 flex 為0或null的子Widget 的大小，然后會(huì)按照彈性子Widget的flex占所有彈性子Widget的flex總和的比例分割主軸的空閑空間。
二、線性布局
Flutter 的線性布局和 Android 中的一樣分為水平方向的線性布局Row和垂直方向的線性布局Column。
1. Row
- 使用：
Row(
children: <Widget>[
Text("Hello Flutter"),
Image.asset(
"images/flutter.png",
width: 200,
)
],
)
- Row 的構(gòu)造函數(shù)及參數(shù)說明：
class Row extends Flex {
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//可選；類型 MainAxisAlignment；表示子Widget 在主軸的對(duì)齊方式
MainAxisSize mainAxisSize = MainAxisSize.max,//可選；類型 MainAxisSize；表示主軸應(yīng)該占用多大的空間
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//可選；類型 CrossAxisAlignment；表示子Widget在交叉軸的對(duì)齊方式
TextDirection textDirection,//可選；類型TextDirection；表示子Widget在主軸方向上的布局參數(shù)
VerticalDirection verticalDirection = VerticalDirection.down,//可選；類型VerticalDirection；表示子Widget在交叉軸方向上的布局順序
TextBaseline textBaseline,//可選；類型TextBaseline；排列子Widget時(shí)使用哪個(gè)基線
List<Widget> children = const <Widget>[],//可選；類型List< Widget>；Flex布局里排列的內(nèi)容
}) : super(
children: children,
key: key,
direction: Axis.horizontal,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
}
2. Column
- 使用：
Column(
children: <Widget>[
Text("Hello Flutter"),
Image.asset(
"images/flutter.png",
width: 200,
)
],
)
- Column 的構(gòu)造函數(shù)及參數(shù)說明：
和 Row 的參數(shù)一樣
注意：如果 Row 嵌套 Row，或者 Column 嵌套 Column，那么只有最外面的 Row 或 Column 會(huì)占用盡可能大的空間，里面 Row 或 Column 所占用的空間為實(shí)際的大小。
三、流式布局--Wrap
頁面元素的寬度可以按照屏幕分辨率進(jìn)行適配調(diào)整，把超出屏幕顯示范圍的控件自動(dòng)換行。
- 使用：
Wrap(
direction: Axis.horizontal,
children: <Widget>[
...
]
)
- 代碼示例：
import 'package:flutter/material.dart';
class WrapWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'WrapWidget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('WrapWidget'),
),
body: Wrap(
direction: Axis.horizontal,
spacing: 10.0,
runSpacing: 5.0,
children: <Widget>[
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('1'),
),
label: new Text('AAAAAAAAAA')),
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('1'),
),
label: new Text('BBBBB')),
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('1'),
),
label: new Text('CCCCCCCCCCC')),
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('2'),
),
label: new Text('DDDDDDDD')),
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('2'),
),
label: new Text('EEEEEE')),
],
),
),
);
}
}
-
運(yùn)行結(jié)果：
Wrap 的構(gòu)造函數(shù)及參數(shù)說明：
class Wrap extends MultiChildRenderObjectWidget {
Wrap({
Key key,
this.direction = Axis.horizontal,//可選；類型 Axis；主軸的方向，默認(rèn)是 Axis.horizontal
this.alignment = WrapAlignment.start,//可選；類型 WrapAlignment；子Widget在主軸上的對(duì)齊方式，默認(rèn)值為WrapAlignment.start，和MainAxisAlignment的一樣
this.spacing = 0.0,//可選；類型 double；主軸的方向間距
this.runAlignment = WrapAlignment.start,//可選；類型 WrapAlignment；Wrap 會(huì)自動(dòng)換成或換列，runAlignment 就是每行或每列的對(duì)齊方式，如果主軸為水平方向，就是每行，如果主軸為豎直方向，就是每列，默認(rèn)值為WrapAlignment.start，WrapAlignment 的值和 MainAxisAlignment 的一樣
this.runSpacing = 0.0,//可選；類型 double；每行或每列之間的間距，默認(rèn)是0.0
this.crossAxisAlignment = WrapCrossAlignment.start,//可選；類型 WrapCrossAlignment；子Widget 在交叉軸上的對(duì)齊方式，WrapCrossAligment.start,WrapCrossAligment的值和MainAxisAligment的一樣
this.textDirection,//可選；類型 TextDirection；表示子Widget在主軸方向上的布局順序
this.verticalDirection = VerticalDirection.down,//可選；類型 VerticalDirection；表示子Widget在交叉軸方向上的布局順序
List<Widget> children = const <Widget>[],//可選；類型 List<Widget>；Wrap布局里排序的內(nèi)容
}) : super(key: key, children: children);
...
}
四、層疊布局--Stack
Flutter 中的層疊布局類似 Android 中的 FrameLayout，其子Widget 會(huì)按照添加順序確定顯示層級(jí)，后面添加的會(huì)覆蓋在前面添加的 Widget 上面。
- 使用：
Stack(
children: <Widget>[
Image.asset(
"images/flutter.png",
width: 200,
fit: BoxFit.cover,
),
Text('Hello Flutter',style: TextStyle(fontSize: 50.0),),
],
)
- Stack 的構(gòu)造函數(shù)及參數(shù)說明：
class Stack extends MultiChildRenderObjectWidget {
Stack({
Key key,//可選；類型 Key；Widget的標(biāo)識(shí)
this.alignment = AlignmentDirectional.topStart,//可選；類型AlignmentDirectional
this.fit = StackFit.loose,//可選；類型 StackFit；此參數(shù)用于決定 non-positioned 子Widget 如何去適應(yīng)Stack的大小
this.overflow = Overflow.clip,//可選；類型 Overflow；決定如何顯示超出 Stack顯示空間的子Widget
List<Widget> children = const <Widget>[],//可選；類型 List<Widget>；Stack布局里排序的內(nèi)容
}) : super(key: key, children: children);
...
}
（1）alignment 參數(shù)：
決定如何對(duì)齊 non-positioned 子Widget 和部分 position 子Widget，默認(rèn)值為Alignment.topStart，部分 positioned 子Widget，在某一個(gè)軸上沒有定義的，這個(gè)軸就使用 alignment 的值，比如left、right為橫軸，left 和right 都沒有定義，就是橫軸沒有定義，只要這兩個(gè)一個(gè)有值，這個(gè)軸就算有值；top、bottom為縱軸，同理。
AlignmentDirectional 的值：
AlignmentDirectional.topStart：上邊 start 對(duì)齊
AlignmentDirectional.topCenter：上邊 居中 對(duì)齊
AlignmentDirectional.topEnd：上邊 end 對(duì)齊
AlignmentDirectional.centerStart：中間 start 對(duì)齊
AlignmentDirectional.center：中間對(duì)齊
AlignmentDirectional.centerEnd：中間 end 對(duì)齊
AlignmentDirectional.bottomStart：下邊 start 對(duì)齊
AlignmentDirectional.bottomCenter：下邊 居中 對(duì)齊
AlignmentDirectional.bottomEnd：下邊 end 對(duì)齊
（2）fit 參數(shù)：
用于決定 non-positioned 子Widget 如何去適應(yīng)Stack的大小。
StackFit 的值：
StackFit.loose：使用子Widget 自身的大小
StackFit.expand：子Widget 擴(kuò)伸到 Stack 的大小
StackFit.passthrough：Stack 的父Widget 的約束無修改的傳遞給 Stack 的子Widget
（3）overflow 參數(shù)：
決定如何顯示超出 Stack顯示空間的子Widget。
overflow 的值：
Overflow.visible：超出部分仍能看見
Overflow.clip：超出部分會(huì)被剪裁
- Stack 的子Widget
為了確定子Widget 到父容器四個(gè)角的位置，Stack將子Widget 分為兩類：positioned 子Widget 和 non-positioned 子Widget。
（1）Positioned
positioned 子Widget 是指被 Positioned 嵌套起來的 Widget，Positioned 可以控制子Widget 到父容器四個(gè)邊的距離。
使用：
Stack(
fit: StackFit.expand,
children: <Widget>[
Positioned(
left: 50,
top: 100,
child: Image.asset(
"images/flutter.png",
width: 200,
fit: BoxFit.cover,
),
),
Text('Hello Flutter'),
],
),
Positioned 的構(gòu)造函數(shù)及參數(shù)說明：
class Positioned extends ParentDataWidget<Stack> {
const Positioned({
Key key,//可選；類型 Key；Widget的標(biāo)識(shí)
this.left,//可選；類型 double；離Stack左邊的距離
this.top,//可選；類型 double；離Stack上邊的距離
this.right,//可選；類型 double；離Stack右邊的距離
this.bottom,//可選；類型 double；離Stack底邊的距離
this.width,//可選；類型 double；指定Widget的寬度
this.height,//可選；類型 double；指定Widget的高度
@required Widget child,
}) : assert(left == null || right == null || width == null),
assert(top == null || bottom == null || height == null),
super(key: key, child: child);
...
}
注意：此處的width、height 是用于配合 left、top、right、bottom 來定位 Widget 的。并且在水平方向上，只能指定 left、right、width 三個(gè)屬性中的兩個(gè)，如果三個(gè)都指定就會(huì)報(bào)錯(cuò)；垂直方向同理。
（2）non-positioned子Widget
non-positioned 子Widget 就是不用 Positioned 嵌套起來的 Widget，non-positioned 子Widget 使用 Stack 設(shè)置的 alignment 來確定自己在父容器里的位置。
