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

Flutter 第十课：Flutter 组件之 Container