博客地址：flutterall.com
Container
Container构成以及绘制过程
Container作为Flutter中的用来布局的Widget，可以对子widget进行 绘制(painting)、定位(positioning)、调整大小(sizing)操作。
Container构成
绘制过程（painting)
-
transform
Matrix4 transform -
decoration
Decoration -
paints 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,
})
- 没有子节点的Container试图尽可能大，除非传入的约束(constraints
)是无限制(unbounded)的，在这种情况下，它们尽可能地小。 - 拥有子节点的Container，大小会按照子节点的大小进行适应。如果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）
- 调节自身大小去适应子节点
- 优先使用width 、 height、constraints
- 放大自己去填充父节点
- 尽可能的变小
布局策略细分解释
有界是指：bool get hasBoundedWidth => maxWidth < double.infinity;
- 父节点提供了有界(bounded)约束
没有子节点，没有width、height、alignment，但是父节点提供了有界约束（bounded constraints）。
这种情况，Container会自动拓展大小，填充父节点。
class FlutterContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFFCDCD00),
child: Text("hello"),
);
}
}
父节点提供了bounded限制
- unbounded constraints
跟上面情况相反，没有子节点，没有width、height、alignment，但是父节点提供了无界约束（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"),
),
);
}
}
unbounded constraints
- width + height 或者 constraints
没有子节点、对齐方式（alignment），提供width、height或者constraints。
Container会根据自身以及父节点的限制，将自身调节到足够小。
给定width+height
- child+父节点的constraints
Container会将父节点的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"),
),
),
);
}
}
单独的一个child，父节点的minHeight 和 minWidth 被传递过来了
这里父节点的minHeight 和 minWidth 被传递过来了。
- aligment + 父节点的bounded限制
Container会将自身调节足够大，填充到父节点的最大范围。
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 + 父节点的constraints限制
属性
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.centerRight
Alignment坐标轴
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
),
),
),
);
Constraints
没有子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
),
),
),
);
child+constraints 没有alignment
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
),
),
),
)
image.png
这里我设置了
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
),
),
),
);
EdgeInsets.all(20.6)
可以看到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居中
),
),
);
Padding
网友评论