关于flutter:Flutter第十课Flutter组件之Container

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);

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