Flutter Widget 之Container

您是否有widget需要一些背景样式？也许是背景颜色或者形状？还是一些尺寸限制？

尝试将其包装在Container widget中。

Container Widget可帮助您组成，装饰和定位子widget。

如果将widget包装在没有任何其他参数的Container中，则不会发现外观上的任何差异。

Container(
    child: Text('Borning'),
);

但是，如果添加Color参数，您的子窗口widget将获得背景色,没有任何其他内容，容器将根据子容器自行调整大小。

Container(
    child: Text('Borning'),
    color: Colors.blue,
);

使用Container的padding属性,在子widget和容器边界添加空白，

Container(
    child: Text('Less boring'),
    color: Colors.blue,
    padding: EdgeInsets.all(20.0),
);

使用margin属性添加围绕widget的空白

Container(
    child: Text('Less boring'),
    color: Colors.bluem
    padding: EdgeInsets.all(20.0),
    margin: EdgeInsets.all(40.0),
);

使用decoration属性，可以在容器中添加一个形状，泪如圆形。

Container(
    child: Text('Less boring'),
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue,
    ),
);

默认情况下，decoration的大小是根据容器的子widget，在这种情况下，容器对准圆形decoration最窄的参数——文本widget的高度。

你可以像以前一样使用padding个margin来设计该decoration。

Container(
    child: Text('Less boring'),
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue,
    ),
    margin: EdgeInsets.all(25.0),
    padding: EdgeInsets.all(40.0),
);

使用Alignment属性，可以是子容器在容器中对齐。设置对其方式后，容器将展开以填充其父级的宽度和高度

Container(
    child: Text('Less boring'),
    color: Colors.blue,
    alignment: Alignment.center,
);

您可以通过设置容器的width和height属性，

Container(
    child: Text('Less boring'),
    color: Colors.blue,
    alignment: Alignment.center,
    width: 200,
    height: 100,
);

或使用box layout model,例如，使用BoxConstraints，您的容器可以扩展以填充给定的大小。

Container(
    child: Text('Less boring'),
    color: Colors.blue,
    alignment: Alignment.center,
    constraints: BoxConstraints.tightForFinite(
        width: 200,
    ),
);

您设置可以将转换应用于容器，让我们旋转容器为盖设计添加更多风味。

Container(
    child: Text('Less boring'),
    color: Colors.blue,
    width: 200.0,
    height: 200.0,
    transform: Matrix4.rotationZ(0.05),
);

如果想了解有关Container的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址