基本组件 -- Container
容器，一个常用的组件，是一个方便绘制、定位和调整子组件大小的组件.
负责创建矩形的可视元素，可以用BoxDecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制。
构造方法
Container({
Key key,
this.alignment,//控制child的对齐方式
this.padding, //设置内边距
Color color, //设置背景颜色
Decoration decoration,//绘制在child下层的装饰，不能与color同时使用
this.foregroundDecoration,//绘制在child上层的装饰
double width, //宽
double height, //高
BoxConstraints constraints,添加到child上额外的约束条件
this.margin,//外边距
this.transform,//设置container的变换矩阵，类型为Matrix4
this.child, //子组件
}) : assert(margin == null || margin.isNonNegative),
assert(padding == null || padding.isNonNegative),
assert(decoration == null || decoration.debugAssertIsValid()),
assert(constraints == null || constraints.debugAssertIsValid()),
assert(color == null || decoration == null,
'Cannot provide both a color and a decoration\n'
'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'）
常用属性
| 属性名 | 功能 | 值所属类型 |
|---|---|---|
| alignment | topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter 底部居中对齐bottomLeft：底部居左对齐 bottomRight：底部居右对齐 | Alignment |
| decoration | 容器的修饰器，用于背景或者border | BoxDecoration |
| margin | Container与外部其他组件的距离 | 值为一个 EdgeInsets 对象。EdgeInsets 对象即可调用EdgeInsets.all() 方法统一设置左上右下四条边的边距，也可以调用 EdgeInsets.fromLTRB() 分别设置左上右下四条边的边距 |
| padding | Container边缘与Child之间的距离 | 值为一个 EdgeInsets 对象。EdgeInsets 对象即可调用EdgeInsets.all() 方法统一设置左上右下四条边的边距，也可以调用 EdgeInsets.fromLTRB() 分别设置左上右下四条边的边距 |
| transform | 调整旋转的角度 | Matrix4 |
| height | 容器高度 | double |
| width | 容器宽度 | double |
| child | 容器子元素 | Widget |
BoxDecoration 的构造方法
const BoxDecoration({
this.color,
this.image,
this.border,
this.borderRadius,
this.boxShadow,
this.gradient,
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,
}) : assert(shape != null),
assert(
backgroundBlendMode == null || color != null || gradient != null,
'backgroundBlendMode applies to BoxDecoration\'s background color or '
'gradient, but no color or gradient was provided.'
);
代码
/*
* Container 组价
*/
class ContainerView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 200.0,
width: 200.0,
// color: Colors.blueGrey,
alignment: Alignment.centerLeft, // 相对子元素对齐方式
child: Text("zhangssr"),
margin: EdgeInsets.all(30.0), //外边距
padding: EdgeInsets.fromLTRB(30.0, 0, 0, 0), //内间距
transform: Matrix4.skewY(0.3),
decoration: BoxDecoration(
//装饰，背景边框等，不能与 color 属性同时设置，会绘制在 child 之下，也就是会被 child 覆盖
color: Colors.blue,
//背景边框
border: Border.all(
//边框颜色
color: Colors.blue,
//边框宽度
width: 5),
// 边框圆角
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
topRight: Radius.circular(10.0),
bottomLeft: Radius.circular(15.0),
bottomRight: Radius.circular(20.0)),
//渐变效果，会覆盖 color
gradient: LinearGradient(
colors: [Color(0xFFFFDEAD), Color(0xFF98FB98), Color(0xFF6495ED)]),
//阴影效果
boxShadow: [BoxShadow(color: Color(0xFFFF0000), blurRadius: 5.0)],
//应该是背景混合模式，这个应该比较复杂，后面再研究
backgroundBlendMode: BlendMode.color,
),
);
}
}
image.png
