博客地址：flutterall.com
Container構成以及繪制過程
Container作為Flutter中的用來布局的Widget，可以對子widget進行 繪制(painting)、定位(positioning)、調整大小(sizing)操作。
繪制過程（painting)
transform
Matrix4 transformdecoration
Decorationpaints the child
paints the foregroundDecoration
調整大小(sizing)
看下Container 構造方法，下面的大小約束會更好理解。
Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})
- 沒有子節(jié)點的Container試圖盡可能大，除非傳入的約束(constraints
)是無限制(unbounded)的，在這種情況下，它們盡可能地小。 - 擁有子節(jié)點的Container，大小會按照子節(jié)點的大小進行適應。如果Container設置了大小參數（例如：
width,height, constraints
），則按照Container的大小參數來。
布局行為
由于Container包含了一系列其他的Widget，所以Container得布局行為是由一系列其他的Widget的布局行為組合而成。所以，Container的布局行為比較麻煩。
布局策略順序
Container tries, in order: to honor alignment, to size itself to the child, to honor the
width,height, and constraints, to expand to fit the parent, to be as small as possible.
也就是說，Container會按照下面的這個順序去進行布局操作：
- 對齊（alignment）
- 調節(jié)自身大小去適應子節(jié)點
- 優(yōu)先使用width 、 height、constraints
- 放大自己去填充父節(jié)點
- 盡可能的變小
布局策略細分解釋
有界是指：bool get hasBoundedWidth => maxWidth < double.infinity;
- 父節(jié)點提供了有界(bounded)約束
沒有子節(jié)點，沒有width、height、alignment，但是父節(jié)點提供了有界約束（bounded constraints）。
這種情況，Container會自動拓展大小，填充父節(jié)點。
class FlutterContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFFCDCD00),
child: Text("hello"),
);
}
}
- unbounded constraints
跟上面情況相反，沒有子節(jié)點，沒有width、height、alignment，但是父節(jié)點提供了無界約束（unbounded constraints）。
這種情況，Container會盡可能的小。
class FlutterContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: const Color(0xFF00FF00),
child: Text("hello"),
),
);
}
}
- width + height 或者 constraints
沒有子節(jié)點、對齊方式（alignment），提供width、height或者constraints。
Container會根據自身以及父節(jié)點的限制，將自身調節(jié)到足夠小。
- child+父節(jié)點的constraints
Container會將父節(jié)點的constraints傳遞給子child
class FlutterContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.blue,
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0),
child: Container(
color: Colors.brown,
child: Text("hello"),
),
),
);
}
}
這里父節(jié)點的minHeight 和 minWidth 被傳遞過來了。
- aligment + 父節(jié)點的bounded限制
Container會將自身調節(jié)足夠大，填充到父節(jié)點的最大范圍。
class FlutterContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.blue,
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0),
child: Container(
alignment: Alignment.topLeft,
color: Colors.brown,
),
),
);
}
}
屬性
Alignment-約束child的位置
class FlutterContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 300,
height: 200,
alignment: Alignment.centerRight,
color: Colors.blue,
child: Text("Hello"),
)
);
}
}
Alignment坐標軸
比如：
static const Alignment center = Alignment(0.0, 0.0); 表示居中
static const Alignment bottomLeft = Alignment(-1.0, 1.0); 表示左下
....
Constraints - 控件占用的空間大小
一般使用BoxConstraints
Center(
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Container(
color: Colors.brown,
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0
),
),
),
);
沒有子child，給定了constraint，所以按照maxW、maxH來布局
如果我給了child呢？看下面：
Center(
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Container(
color: Colors.brown,
child: Text("hello"),
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0
),
),
),
);
Margin-給Container設置外邊距
一般使用EdgeInsets
我們先看下默認情況：
Center(
child: Container(
color: Colors.blue,
alignment: Alignment.centerRight,
child: Container(
color: Colors.brown,
child: Text("HELLO"),
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0
),
),
),
)
這里我設置了
Alignment.centerRight，所以控件靠右居中。現在我們加上EdgeInsets，看看。
Center(
child: Container(
color: Colors.blue,
alignment: Alignment.centerRight,
child: Container(
margin: EdgeInsets.all(20.6),
color: Colors.brown,
child: Text("HELLO"),
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0
),
),
),
);
可以看到Container距離右邊有了一定的邊距。需要注意的是
EdgeInsets.all是距離四周的邊距，我這里由于Container較小，看不出來。除了
all還有下面幾個方法：
- fromLTRB (設置左上右下邊距)
- symmetric({ double vertical = 0.0, double horizontal = 0.0 })
設置垂直、水平的外邊距 - only({
this.left = 0.0,
this.top = 0.0,
this.right = 0.0,
this.bottom = 0.0
})
Padding 設置Container內邊距
這個跟Margin使用類似的。
Center(
child: Container(
constraints: BoxConstraints(
minHeight: 100, minWidth: 200, maxWidth: 400, maxHeight: 200),
child: Container(
margin: EdgeInsets.all(20.5),
padding: EdgeInsets.fromLTRB(30.4, 0, 0, 80),
//設置padding內邊距后，child居中偏移了位置
color: Colors.brown,
child: Text("HELLO"),
alignment: Alignment.center,//child居中
),
),
);
本地代碼地址
Flutter Container
Flutter SafeArea
Flutter Row Column MainAxisAlignment Expanded
Flutter Image全解析
Flutter 常用按鈕總結
Flutter ListView豆瓣電影排行榜
Flutter Card
Flutter Navigator&Router(導航與路由)
OverscrollNotification不起效果引起的Flutter感悟分享
Flutter 上拉抽屜實現
Flutter 豆瓣客戶端，誠心開源
Flutter 更改狀態(tài)欄顏色
