轉載自：https://www.jianshu.com/p/1836d8d23926

 

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:

1. 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.
2. 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.
3. 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).
4. The height of the Row is the maximum height of the children (which will always satisfy the incoming vertical constraints).
5. 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).
6. 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

示例:略

作者：H029982384
連結：https://www.jianshu.com/p/1836d8d23926
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。