flutter值container布局

Container布局

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

组件名称中文释义说明keyKeyContainer 唯一标识符，用于查找更新alignmentAlignmentGeometry控制 child 的对齐方式，如果 Container 或者 Container 父节点尺寸大于 child 的尺寸，这个属性设置会起作用，有很多种对齐方式paddingEdgelnsetsGeometryDecoration 内部的空白区域，如果有 child 的话， child 位于 padding 内部colorColor用来设置 Container 背景色，如果 foregroundDecoration 设置的话，可能会遮盖 color 效果decorationDecoration绘制在 child 后面的装饰，设置了 Decoration 的话，就不能设 置 color 属性，否则会报错，此时应该在 Decoration 中进行颜色的设置foregroundDecorationDecoration绘制在 child前面的装饰widthdoubleContainer 的宽度，设置为 double.infinity 可以强制在宽度上撑满，不设置， 则根据 child 和父节点两者一起布局heightdoubleContainer 的高度，设置为 double.infinity 即可以强制在高度上撑满constraintsBoxConstraints添加到 child 上额外的约束条件marginEdgelnsetsGeometry围绕在 Decoration 和 child 之外的空白区域，不属于内容区域transformMatrix4设置 Container 的变换矩阵，类型为 Matrix4childWidgetContainer 中的内容 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: <Widget>[ Container( width: 160.0, color: Colors.yellow, ), Container( width: 160.0, color: Colors.brown, ), Container( width: 160.0, color: Colors.blue, ) ], ), ), ), ); } }