flutter值container布局

Container布局

Container布局称为容器布局，在Flutter中大量使用，它是一个组合widget，内部有绘制widget、定位widget和尺寸widget。Container组件的常用属性如下。

组件名称	中文释义	说明
key	Key	Container 唯一标识符，用于查找更新
alignment	AlignmentGeometry	控制 child 的对齐方式，如果 Container 或者 Container 父节点尺寸大于 child 的尺寸，这个属性设置会起作用，有很多种对齐方式
padding	EdgelnsetsGeometry	Decoration 内部的空白区域，如果有 child 的话， child 位于 padding 内部
color	Color	用来设置 Container 背景色，如果 foregroundDecoration 设置的话，可能会遮盖 color 效果
decoration	Decoration	绘制在 child 后面的装饰，设置了 Decoration 的话，就不能设 置 color 属性，否则会报错，此时应该在 Decoration 中进行颜色的设置
foregroundDecoration	Decoration	绘制在 child前面的装饰
width	double	Container 的宽度，设置为 double.infinity 可以强制在宽度上撑满，不设置， 则根据 child 和父节点两者一起布局
height	double	Container 的高度，设置为 double.infinity 即可以强制在高度上撑满
constraints	BoxConstraints	添加到 child 上额外的约束条件
margin	EdgelnsetsGeometry	围绕在 Decoration 和 child 之外的空白区域，不属于内容区域
transform	Matrix4	设置 Container 的变换矩阵，类型为 Matrix4
child	Widget	Container 中的内容 Widget

代码示例

class ListViewHorizontalDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "水平的列表组件";
    return MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Container(
          decoration: new BoxDecoration(
              color: Colors.white,
              border: Border.all(
                  color: Colors.red, width: 1.0, style: BorderStyle.solid)),
          margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 16.0),
          width: 400.0,
          height: 200.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              Container(
                width: 160.0,
                color: Colors.yellow,
              ),
              Container(
                width: 160.0,
                color: Colors.brown,
              ),
              Container(
                width: 160.0,
                color: Colors.blue,
              )
            ],
          ),
        ),
      ),
    );
  }
}