一、介绍
Container 组件是一个方便绘制、定位和调整子组件大小的组件(可以装别的组件的盒子)
二、创建container组件源码
Container({
Key key,
this.alignment,
this.padding,
this.color,
this.decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
this.clipBehavior = Clip.none,
}) : assert(margin == null || margin.isNonNegative),
assert(padding == null || padding.isNonNegative),
assert(decoration == null || decoration.debugAssertIsValid()),
assert(constraints == null || constraints.debugAssertIsValid()),
assert(clipBehavior != null),
assert(decoration != null || clipBehavior == Clip.none),
assert(color == null || decoration == null,
'Cannot provide both a color and a decoration\n'
'To provide both, use "decoration: BoxDecoration(color: color)".'
),
constraints =
(width != null || height != null)
? constraints?.tighten(width: width, height: height)
?? BoxConstraints.tightFor(width: width, height: height)
: constraints,
super(key: key);
三、属性介绍
对齐方式，使用如下
| 属性 | 说明 |
|---|---|
| Alignment.topLeft | 垂直靠顶部水平靠左对齐 |
| Alignment.topCenter | 垂直靠顶部水平居中对齐 |
| Alignment.topRight | 垂直靠顶部水平靠右对齐 |
| Alignment.centerLeft | 垂直居中水平靠左对齐 |
| Alignment.center | 垂直和水平居中都对齐 |
| Alignment.centerRight | 垂直居中水平靠右对齐 |
| Alignment.bottomLeft | 垂直靠底部水平靠左对齐 |
| Alignment.bottomCenter | 垂直靠底部水平居中对齐 |
| Alignment.bottomRight | 垂直靠底部水平靠右对齐 |
| Alignment(double x, double y) | 根据具体的x,y轴偏移量定位 |
内边距，使用如下
| 属性 | 说明 |
|---|---|
| EdgeInsets.all(double value) | 上下左右统一设置内边距 |
| EdgeInsets.fromLTRB（double left,double top,double double right,double bottom） | 分别设置左上右下的内边距 |
背景色,不能与 decoration 属性同时设置
装饰，也就是设置背景色、边框、圆角等，不能和color同时使用，Decoration是抽象类，一般使用BoxDecoration的实现类（FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator也是Decoration的实现类）
BoxDecoration的源码
const BoxDecoration({
this.color,//背景填充颜色
this.image,//使用图片作为装饰
this.border,//可以设置边框颜色、边框宽度、边框样式
this.borderRadius,//边框圆角
this.boxShadow,//阴影效果
this.gradient,//设置成渐变效果的背景，会覆盖 color
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.'
);
BoxDecoration属性
| 属性 | 说明 |
|---|---|
| Color color | 背景填充颜色 |
| DecorationImage image | 使用图片作为装饰 |
| Border border | 可以设置边框颜色、边框宽度、边框样式 |
| BorderRadius borderRadius | 边框圆角 |
| BoxShadow boxShadow | 阴影效果 |
| LinearGradient gradient | 设置成渐变效果的背景，会覆盖 color |
| BlendMode backgroundBlendMode | 混合模式 |
装饰，绘制在child之上，使用方法同decoration
宽
高
约束条件（暂不了解如何使用）
外边距，使用方法同padding
形状变化，简单使用如下
| 属性 | 说明 |
|---|---|
| Matrix4.translationValues(double x,double y,double z) | 根据x,y,z的值进行平移 |
| Matrix4.diagonal3Values(double x,double y,double z) | 根据x,y,z的值进行缩放，正值放大，负值缩小 |
| Matrix4.rotationZ(double z) | 根据z轴进行旋转 |
| Matrix4.rotationY(double y) | 根据y轴进行旋转 |
| Matrix4.rotationX(double x) | 根据x轴进行旋转 |
| Matrix4.skew(double x,double y) | 根据x,y轴的值进行扭曲 |
| Matrix4.skewX(double x) | 根据x轴的值进行扭曲 |
| Matrix4.skewY(double y)根据y轴的值进行扭曲 |
子组件
demo
class ContainerTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
//对齐方式
alignment: Alignment.center,
//内边距
padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
//背景色
// color: Colors.yellow,
//装饰
decoration: BoxDecoration(
//背景色
color: Colors.red,
//图片地址
// image: DecorationImage(image: NetworkImage("url")),
//边框
border: Border.all(color: Color(0xff000000), width: 5.0),
//圆角
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(20.0),
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.circular(40.0)),
//阴影
boxShadow: [BoxShadow(color: Color(0xff000000), blurRadius: 5.0)],
//渐变色
gradient: LinearGradient(
colors: [Colors.amberAccent, Colors.blue, Colors.deepPurple]),
// backgroundBlendMode: BlendMode.color //混合模式
),
//装饰，child之上
// foregroundDecoration: BoxDecoration(),
child: Text(
"我是一个文本",
style: TextStyle(color: Colors.red),
),
//宽
width: 300.0,
//高
height: 300.0,
//外边距
margin: EdgeInsets.all(10.0),
//根据x,y,z的值进行平移
// transform:Matrix4.translationValues(20.0, 20.0, 20.0),
//根据x,y,z的值进行缩放，正值放大，负值缩小
// transform: Matrix4.diagonal3Values(-2, -2, 1),
//根据z轴进行旋转
// transform: Matrix4.rotationZ(1.3),
//根据y轴进行旋转
// transform: Matrix4.rotationY(1.3),
//根据x轴进行旋转
// transform: Matrix4.rotationX(1.5),
//扭曲，根据x,y轴的值进行扭曲
// transform: Matrix4.skew(1.5, 0.0),
//扭曲，根据x轴的值进行扭曲
// transform: Matrix4.skewX(1.3),
//扭曲，根据y轴的值进行扭曲
transform: Matrix4.skewY(-0.5),
));
}
}
企业微信截图_16056317458073.png
（整理出来，方便个人查找和学习）