前文说过 Flutter 把宽高 位置 约束 装饰 边距 都抽象出来，抽象成容器来承载具体的 view，这个容器 就是我们要说的 Container 了，从语义上就能看出来，这是我觉得 Google 起名字起的最好的了
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,
})
-
key- 是构造函数系统自动传入的，我们不用管，用来更新 WeightTree 的 -
alignment- 是对齐方式，Container 的大小要是不内部子 view 大的花，这个 alignment 才能起作用 -
color- 是背景色，和decoration冲突，二者只能使用一个 -
decoration- 是装饰，相当于 android 的 shape，我专门写了一篇文章，不了解的可以去看：Flutter - Decoration -
constraints- 这个是额外约束 -
transform- 矩阵变换，类型为 Matrix4
其他属性就不用介绍了，现在看下 Container 特征
Container size 设置
Flutter 里具体的内容 Weight 没法自己设置宽高了，全得靠诸如：Container 这样的父容器来设置，Container 只能给 width/height 设置具体值和最大最小值，要是想像 android 那样设置 match_parent、wrap_content 就必须借助布局 weight 才行，Container 只能设置 width/height 同时 match_parent、wrap_content，不能单独设置，非常不灵活
class oneContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
// 宽高只能接收具体值
width: 600,
height: 600,
// 借助 BoxConstraints 可以设置最大值、最小值
constraints: BoxConstraints(
maxHeight: 20,
maxWidth: 20,
minHeight: 20,
minWidth: 20,
),
);
}
}
注意点：
- Container 没有子 view 的也没有设置大小时，默认无无限大，填充整个父容器
- Container 有子 view 但是 Container 自身没有设置大小限制时，相当于 wrap_content
最后看看 Container match_parent，需要借助：BoxConstraints.expand()
class oneContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 200,
alignment: Alignment.center,
color: Colors.lightBlueAccent,
constraints: BoxConstraints.expand(),
child: Text("AAAAAA"),
);
}
}
添加子 view
Flutter 中有个规律，能添加多个子 view 的使用 children 负数，只能添加1个子 view 的使用 child 单数，Container 本来就是作为一个外层容器的，干的是形容词的事，通过 child 添加子 view
class oneContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 200,
height: 200,
alignment: Alignment.center,
color: Colors.lightBlueAccent,
child: Text("AAAAAA"),
);
}
}
本来这个没必要拿出来专门说的，但是有的朋友搞不清为啥一会是children 一会是child
Alignment 对齐方式
Alignment 相当于 Android 的 layout_gravity，控制 Container 内部 view 在 Container 中的位置，但是 Container 的 size 必须比其内部的子 view 大才能生效，要不大家想想要这个参数干嘛
Container 中的 Alignment 有3种方式，2套坐标：
class oneContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 200,
height: 200,
// 绝对坐标
alignment: FractionalOffset(0, 0),
// 相对坐标
alignment: Alignment(-1,1),
// 预设模式
alignment: Alignment.center,
color: Colors.lightBlueAccent,
child: Text("AAAAAA"),
);
}
}
Alignment.center 大家逗看的懂吗，我就不说了
-
相对坐标是以 Container 中心点为原点，左边为负数，右边是正数，Alignment(0，0) 代表居中
-
绝对坐标以 Container 左上角为原点，像左像右延伸至1，FractionalOffset(0.5, 0.5) 代表居中
大家放心，临界值 0 或者 1 都不会超过 Container 的
最后
Container 那些设置单独拿出来其实都是 weight，比较常用的有: Padding Center SizeBox Align，Container 用习惯了这些没必要用了
Container 的transform 矩阵变换属性，类型为 Matrix4，具体的请大家自己去百度吧，这里不介绍这个了，基本上 Container 就这些了
不过 Align 有必要说一下，Align 可以设置父控件宽高是子控件宽高的倍数
比如这样：外层控件是子控件宽高的 2倍
new Align(
alignment: Alignment.center,
widthFactor: 2.0,
heightFactor: 2.0,
child: new Text("Align"),
)