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是可选关键词，能够省略*