Flutter第十课：Flutter组件之Container
一：Container组件
1.可以设置宽高：flutter中大部分组件不能设置宽高，需要依赖容器
2.添加背景颜色
3.添加背景图像
4.添加边框
5.添加内外边框margin和padding
//构造方法
Container({
Key? key,
this.alignment,//控制child的对其方式
this.padding,//设置内边距
this.color,//设置背景色
this.decoration,//绘制在child下层的装饰，不能与color同时使用
this.foregroundDecoration,//绘制在child上层的装饰
double? width,//宽
double? height,//高
BoxConstraints? constraints,//添加到child上额外的约束条件大小，范围约束，constraints有四个属性：minWidth、minHeight、maxWidth、maxHeight。
this.margin,//外边距
this.transform,////设置container的变换矩阵，类型为Matrix4
this.transformAlignment,
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 | 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 | 容器子元素 | Widght |
color:Color背景色,不能与 decoration 属性同时设置
decoration:Decoration装饰，也就是设置背景色、边框、圆角等，不能和color同时使用，Decoration是抽象类，一般使用BoxDecoration的实现类（FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator也是Decoration的实现类）
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.'
);栗子：
return Scaffold(
body: 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),
),
));
小知识点Tips：
*dart 1.x的时候，new是不能省略的。
dart 2.x的时候，new是可选关键词，可以省略*