Javascript is required
【转】Flutter Container

Container组件

简介

它是一个 StatelessWidget,其中 build 方法使用了如下八个组件

image-20210110191210028

1. 颜色属性

LayoutBuilder 篇我们知道,Scaffold 组件的 body 对应上层的区域约束为 BoxConstraints(0.0<=w<=屏幕宽, 0.0<=h<=屏幕高)。从表现上来看,当只有 color 属性时,Container 的尺寸会铺满最大约束区域。

image-20210110193612007

image-20210110193750865

388行代码,如果child为null。 并且constraints==null .

会被套上 LimitedBox + ConstrainedBox,其中 ConstrainedBox 的约束是延展的。 当颜色非 null,会在 current 上传套上 ColoredBox,而 ColoredBox 组件的作用就是在尺寸区域中填充颜色。这就是 Container 的尺寸会铺满最大约束区域的原因。

child

如果设置了child属性, Container布局尺寸会与child一致。

image-20210110194056489

3. 宽高属性

添加宽高属性之后,Container 的布局区域会变为指定区域。

Container(
  width: 50,
  height: 50,
  color: Colors.blue,
  child: SizedBox(
    width: 100,
    height: 100,
  ),
),

4. alignment

可以将子组件在容器区域内对齐摆放

if (alignment != null)
      current = Align(alignment: alignment, child: current);

5. padding 和 margin 属性

外边距,内边距

paddingmargin 属性都是使用 Padding 属性完成的,只不过 margin 在外侧包裹而已。可以看到实际的 padding 值是通过 _paddingIncludingDecoration 获得的,其中会包含装饰的边距,默认为 0。

6. decoration 和 foregroundDecoration 属性

decoration 属性和 foregroundDecoration 非空时,都会包裹一个 DecoratedBox 组件。 foregroundDecoration 是前景装饰,所以较背景装饰而言在上层。

transform

transform 接收一个 Matrix4 的变化矩阵对象,可以据此完成一些移动、旋转、缩放的变换效果。不过通过源码可以看出 Container 组件只是对 Transform 的一个简单封装,实际上 Transform 还可以指定变化中心 origin对齐模式 alignment 等。这样可以看出来 Container 只是为了组件的简化使用,并非全权将这些组件的功能进行集成。

https://juejin.cn/post/6914815362299068430