博客地址:flutterall.com
Container构成以及绘制过程
Container作为Flutter中的用来布局的Widget,可以对子widget进行 绘制(painting)、定位(positioning)、**调整大小(sizing)**操作。
绘制过程(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"),
);
}
}
- unbounded constraints
跟上面情况相反,没有子节点,没有width、height、alignment,但是父节点提供了无界约束(unbounded constraints)。
这种情况,Container会尽可能的小。
cla