更多信息請查看flutter layout
Layouts
Sigle-child layout widgets
Container:
一個方便的小控件，結合常見的繪畫，定位和尺寸的小控件。
屬性包括:
- alignment: 對齊方式
- padding: 內邊距
- color: 顏色
- decoration: 裝飾
- foregroundDecoration: 前置裝飾
- width: 寬度
- height: 高度
- constraints: 約束
- margin: 外邊距
- transform: 轉場方式
- child: 子控件
示例:
new Container( constraints: new BoxConstraints.expand( height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0, ), padding: const EdgeInsets.all(8.0), color: Colors.teal.shade700, alignment: Alignment.center, child: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)), foregroundDecoration: new BoxDecoration( image: new DecorationImage( image: new NetworkImage('https://www.example.com/images/frame.png'), centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0), ), ), transform: new Matrix4.rotationZ(0.1), )
Padding
通過給定的填充來插入其子的小控件
屬性包括：
- padding: 內邊距
- child: 子控件
示例:
new Padding( padding: new EdgeInsets.all(8.0), child: const Card(child: const Text('Hello World!')), )
設計討論
為什么使用Padding小控件而不是Container和Container.padding屬性？
兩者之間沒有任何區別。如果您提供Container.padding參數，則Container僅為您構建一個Padding小控件。 容器不直接實現其屬性。相反，Container將許多更簡單的小控件組合到一個方便的包中。例如，Container.padding屬性將導致容器構建一個Padding小控件，而Container.decoration屬性將導致容器構建一個DecoratedBox小控件。如果您發現Container方便，請隨時使用它。如果沒有，請隨時以任何組合滿足您的需求來構建這些更簡單的小控件。實際上，Flutter中的大部分小控件只是其他更簡單的小控件的組合。構成而不是繼承是構建小控件的主要機制。
Center
一個將子控件放置在自己內部中心的小控件。
屬性包括:
- widthFactor: 寬度系數
- heightFactor: 高度系數
- child: 子控件
說明: 寬度系數和高度系數是指Center的寬高是其子控件寬高的比率，例如heightFactor是2.0的話，那么Center的高度將是子控件高度的二倍。
示例: 略
Align
一個 通過自己對齊子控件，并且可能會根據子控件的大小來控制自己尺寸 的小控件
屬性包括:
- alignment: 對齊方式
- heightFactor: 高度系數
- widthFactor: 寬度系數
- child: 子控件
示例: 略
FittedBox
控件
通過縮放和定位子控件來進行合適的調整
屬性包括:
- fit: 如何將子控件寫入布局過程中分配的空間
- alignment: 對齊方式
- child: 子控件
示例: 略
AspectRatio
一個根據特定的長寬比來布局子控件的特殊控件
小控件首先嘗試布局約束所允許的最大寬度。通過將給定的高寬比應用于寬度來確定小控件的高度，表示為寬度與高度的比率。 例如，16：9寬高比高寬比應為16.0 / 9.0。如果最大寬度是無限的，則通過將縱橫比應用于最大高度來確定初始寬度。 現在考慮第二個示例，這次的寬高比為2.0，布局約束要求寬度在0.0到100.0之間，高度在0.0到100.0之間。我們將選擇寬度100.0（允許的最大值）和高度50.0（以匹配寬高比）。 在這種情況下，如果寬高比為0.5，我們也會選擇100.0的寬度（仍然是最大的寬度），我們將嘗試使用200.0的高度。不幸的是，這違反了限制因素，因為子控件可能最多只有100.0像素。然后小控件將采用該值并再次應用寬高比以獲得50.0的寬度。該寬度由約束條件允許，并且子節點的寬度為50.0，高度為100.0。如果寬度不被允許，小控件將繼續遍歷約束。如果在查詢每個約束之后，小控件沒有找到可行的大小，那么小控件將最終為滿足布局約束但未能滿足寬高比約束的子控件選擇大小。
屬性包括:
- aspectRatio: 寬高比
- child: 子控件
示例: 略
ConstrainedBox
一個對其子控件進行額外約束的控件
屬性包括:
- constraints: 約束
- child: 子控件
示例:
new ConstrainedBox( constraints: const BoxConstraints.expand(), child: const Card(child: const Text('Hello World!')), )
Baseline
根據孩子的基線定位子控件的小控件
屬性包括：
- baseline:設定的距離控件頂部的基線位置
- baselineType: 基線的類型
- child: 子控件
示例: 略
FractionallySizedBox
一個小控件，其大小為其可用空間的一小部分
屬性包括:
- alignment: 對齊方式
- heightFactor: 高度系數
- widthFactor: 寬度系數
- child: 子控件
示例: 略
IntrinsicHeight
一個根據內部子控件高度來調整高度
屬性包括：
- child: 子控件
示例: 略
說明:避免使用
IntrinsicWidth
一個根據內部子控件高度來調整高度
屬性包括：
- stepHeight: 控制子控件的高度為當前高度乘以這個值
- stepwidth: 控制子控件的寬度為當前寬度乘以這個值
- child: 子控件
示例: 略
說明:避免使用
LimitedBox
只有當它不受約束時才會限制它的大小
屬性包括:
- maxWidth: 不受限制的最大寬度
- maxHeight: 不受限制的最大高度
- child: 子控件
示例: 略
Offstage
一個可以控制其子控件顯示或者隱藏的小控件
屬性包括:
- offstage: 是否隱藏
- child: 子控件
OverflowBox
一個可以讓子控件溢出其父控件的控件
屬性包括:
- alignment: 對齊方式
- maxHeight: 最大高度
- maxWidth: 最大寬度
- minHeight: 最小高度
- minWidth: 最小寬度
- child: 子控件
示例: 略
SizedBox
一個具有特殊尺寸的控件
屬性包括:
- height: 高度
- widht: 寬度
- child: 子控件
示例:
new SizedBox( width: 200.0, height: 300.0, child: const Card(child: const Text('Hello World!')), )
SizedOverflowBox
一個具有特殊尺寸并且可能會溢出的小控件
屬性包括:
- alignment: 對齊方式
- size: 尺寸
- child: 子控件
示例: 略
Transform
一個在子控件繪制之前進行轉換的控件
屬性包括:
- alignment: 對齊方式
- origin: 原點
- transform: 轉場動畫
- transformHitTests: 是否在執行命中測試時應用轉換
- child: 子控件
示例:
new Container( color: Colors.black, child: new Transform( alignment: Alignment.topRight, transform: new Matrix4.skewY(0.3)..rotateZ(-math.PI / 12.0), child: new Container( padding: const EdgeInsets.all(8.0), color: const Color(0xFFE8581C), child: const Text('Apartment for rent!'), ), ), )
CustomSingleChildLayout
一個可以代理子控件布局的控件
屬性包括:
- delegate: 代理對象
- child: 子控件
Multi-child layout widgets
Row
在水平方向上布局子部件的列表。
Troubleshooting
為什么我的行有黃色和黑色的警告條紋？
如果行的非靈活內容（未包含在擴展或靈活小部件中的那些內容）在一起大于行本身，則說該行已經溢出。當一行溢出時，該行沒有任何剩余空間可用于在其展開和彈性子項之間共享。該行通過在溢出的邊上繪制黃色和黑色條紋警告框來報告此情況。如果行外有空間，溢出量將以紅色字體打印。
屬性包括:
- children: 子控件們
- crossAxisAlignment: 子控件應該如何沿著橫軸放置
- direction: 主軸方向
- mainAxisAlignment: 子控件應該如何沿著主軸放置
- mainAxisSize: 主軸應該占據多少空間
說明：
Layout algorithm
This section describes how a Row is rendered by the framework. See BoxConstraints for an introduction to box layout models.
Layout for a Row proceeds in six steps:
- Layout each child a null or zero flex factor (e.g., those that are not Expanded) with unbounded horizontal constraints and the incoming vertical constraints. If the crossAxisAlignment is CrossAxisAlignment.stretch, instead use tight vertical constraints that match the incoming max height.
- Divide the remaining horizontal space among the children with non-zero flex factors (e.g., those that are Expanded) according to their flex factor. For example, a child with a flex factor of 2.0 will receive twice the amount of horizontal space as a child with a flex factor of 1.0.
- Layout each of the remaining children with the same vertical constraints as in step 1, but instead of using unbounded horizontal constraints, use horizontal constraints based on the amount of space allocated in step 2. Children with Flexible.fit properties that are FlexFit.tight are given tight constraints (i.e., forced to fill the allocated space), and children with Flexible.fit properties that are FlexFit.loose are given loose constraints (i.e., not forced to fill the allocated space).
- The height of the Row is the maximum height of the children (which will always satisfy the incoming vertical constraints).
- The width of the Row is determined by the mainAxisSize property. If the mainAxisSize property is MainAxisSize.max, then the width of the Row is the max width of the incoming constraints. If the mainAxisSize property is MainAxisSize.min, then the width of the Row is the sum of widths of the children (subject to the incoming constraints).
- Determine the position for each child according to the mainAxisAlignment and the crossAxisAlignment. For example, if the mainAxisAlignment is MainAxisAlignment.spaceBetween, any horizontal space that has not been allocated to children is divided evenly and placed between the children.
示例:
new Row( children: <Widget>[ const FlutterLogo(), const Expanded( child: const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'), ), const Icon(Icons.sentiment_very_satisfied), ], )
Column
在垂直方向上布局子窗口小部件的列表
屬性包括:
- children: 子控件們
- crossAxisAlignment: 子控件應該如何沿著橫軸放置
- direction: 主軸方向
- mainAxisAlignment: 子控件應該如何沿著主軸放置
- mainAxisSize: 主軸應該占據多少空間
示例:
new Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: <Widget>[ new Text('We move under cover and we move as one'), new Text('Through the night, we have one shot to live another day'), new Text('We cannot let a stray gunshot give us away'), new Text('We will fight up close, seize the moment and stay in it'), new Text('It’s either that or meet the business end of a bayonet'), new Text('The code word is ‘Rochambeau,’ dig me?'), new Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)), ], )
Stack
如果你想以一種簡單的方式重疊幾個子控件，這個類是有用的，例如有一些文本和圖像，用漸變和按鈕疊加
幀布局
屬性包括:
- alignment: 對齊方式
- fit: 適應的方式
- overflow: 是否修剪溢出的控件
- textDirection: 文本方向，用于解決對齊的問題
- children: 子控件們
示例: 略
IndexedStack
顯示指定位置的子控件的控件，其高度等于最大的子控件高度
屬性包括:
- index: 要顯示的子控件的位置
- alignment: 對齊方式
- children: 子控件們
示例: 略
GridView
可滾動的 2D子控件數組
屬性包括:
- childrenDelegate: 子控件提供者代理
- gridDelegate: 控制字控件布局代理
- controller: 滾動控制
- padding: 內邊距
- scrollDirection: 滾動方向
- children: 子控件們
示例:
new GridView.count( primary: false, padding: const EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 2, children: <Widget>[ const Text('He\'d have you all unravel at the'), const Text('Heed not the rabble'), const Text('Sound of screams but the'), const Text('Who scream'), const Text('Revolution is coming...'), const Text('Revolution, they...'), ], )
Flow
一個實現流布局算法的布局
屬性:
- delegate: 控制子控件的變換矩陣
- children: 子控件們
示例: 略
Table
一個實現表格布局算法的控件
屬性包括:
- border: 用于繪制邊線
- children: 子控件們
- columnWidths: 控制列的寬度
- defaultColumnWidth: 默認的列的寬度
- defalutVerticalWidth: 默認的豎直方向的寬度
示例: 略
Wrap
一個小部件，它以多個水平或垂直運行顯示其子項
屬性包括:
- alignment: 對齊方式
- crossAxisAlignment: 主軸相反方向的對齊方式
- direction: 主軸方向
- runAlignment: 相反方向的對齊方式
- runSpacing: 相鄰的兩個主軸相反方向的寬度
- spacing: 子控件主軸方向的相鄰寬度
- children: 子控件們
示例:
new Wrap( spacing: 8.0, // gap between adjacent chips runSpacing: 4.0, // gap between lines children: <Widget>[ new Chip( avatar: new CircleAvatar(backgroundColor: Colors.blue.shade900, child: new Text('AH')), label: new Text('Hamilton'), ), new Chip( avatar: new CircleAvatar(backgroundColor: Colors.blue.shade900, child: new Text('ML')), label: new Text('Lafayette'), ), new Chip( avatar: new CircleAvatar(backgroundColor: Colors.blue.shade900, child: new Text('HM')), label: new Text('Mulligan'), ), new Chip( avatar: new CircleAvatar(backgroundColor: Colors.blue.shade900, child: new Text('JL')), label: new Text('Laurens'), ), ], )
ListBody
一個小部件，它沿著一個給定的軸順序排列它的子元素，強制它們到另一個軸的父元素的維度
這個小部件很少直接使用。相反，請考慮使用ListView，它將相似的布局算法與滾動行為相結合，或者使用Column，這可以更靈活地控制垂直框的布局
屬性包括:
- mainAxis: 主軸方向
- reverse: 列表主體是否將子控件定位在閱讀方向
- children: 子控件們
示例: 略
ListView
可滾動的線性小部件列表。
ListView是最常用的滾動小部件。它在滾動方向上一個接一個地顯示其子項。
在交叉軸上，子控件需要填充ListView。
屬性包括:
- childrenDelegate: 子控件提供者代理
- itemExtent: 子控件數量
- controller: 滾動控制
示例:
new ListView.builder( padding: new EdgeInsets.all(8.0), itemExtent: 20.0, itemBuilder: (BuildContext context, int index) { return new Text('entry $index'); }, )
CustomMultiChildLayout
一個使用委托來定位和定位多個子項的小部件。
屬性包括:
- delegate: 用于控制布局子控件
- children: 子控件們
示例: 略
Layout Helper
LayoutBuilder
構建一個可以依賴父控件大小的控件樹
屬性包括:
- builder: 在布局時調用來構造小部件樹。該構建器不得返回nul
示例:略
