前文说过 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"),
)
网友评论