## 彈性布局
彈性布局允許子widget按照一定比例來分配父容器空間,彈性布局的概念在其UI系統中也都存在,如H5中的彈性盒子布局,Android中的FlexboxLayout。Flutter中的彈性布局主要通過Flex和Expanded來配合實現。
### Flex
Flex可以沿著水平或垂直方向排列子widget,如果你知道主軸方向,使用Row或Column會方便一些,因為Row和Column都繼承自Flex,參數基本相同,所以能使用Flex的地方一定可以使用Row或Column。Flex本身功能是很強大的,它也可以和Expanded配合實現彈性布局,接下來我們只討論Flex和彈性布局相關的屬性(其它屬性已經在介紹Row和Column時介紹過了)。
```
Flex({
...
@required this.direction, //彈性布局的方向, Row默認為水平方向,Column默認為垂直方向
List<Widget> children = const <Widget>[],
})
```
Flex繼承自MultiChildRenderObjectWidget,對應的RenderObject為RenderFlex,RenderFlex中實現了其布局算法。
### Expanded
可以按比例“擴伸”Row、Column和Flex子widget所占用的空間。
```
const Expanded({
int flex = 1,
@required Widget child,
})
```
flex為彈性系數,如果為0或null,則child是沒有彈性的,即不會被擴伸占用的空間。如果大于0,所有的Expanded按照其flex的比例來分割主軸的全部空閑空間。下面我們看一個例子:
```
class FlexLayoutTestRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
//Flex的兩個子widget按1:2來占據水平空間
Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 30.0,
color: Colors.red,
),
),
Expanded(
flex: 2,
child: Container(
height: 30.0,
color: Colors.green,
),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: SizedBox(
height: 100.0,
//Flex的三個子widget,在垂直方向按2:1:1來占用100像素的空間
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 30.0,
color: Colors.red,
),
),
Spacer(
flex: 1,
),
Expanded(
flex: 1,
child: Container(
height: 30.0,
color: Colors.green,
),
),
],
),
),
),
],
);
}
}
```
運行效果如下:

示例中的Spacer的功能是占用指定比例的空間,實際上它只是Expanded的一個包裝:
```
new Expanded(
flex: flex,
child: const SizedBox(
height: 0.0,
width: 0.0,
),
);
```
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示