flutter【容器类组件】 中 Container 组件

flutter 中 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.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

1、容器的大小 可以通过 width 、 height 属性来指定，也可以通过 constraints 类指定，如果它们同时存在，前者优先级更高

2、color 和 decoration 是互斥的，如果同时设置则会报错

示例：

child:Container(
          margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外填充
          constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
          decoration: BoxDecoration(//背景装饰
              gradient: RadialGradient( //背景径向渐变
                  colors: [Colors.white, Colors.orange],
                  center: Alignment.topLeft,
                  radius: .98
              ),
              boxShadow: [ //卡片阴影
                BoxShadow(
                    color: Colors.black54,
                    offset: Offset(2.0, 2.0),
                    blurRadius: 4.0
                )
              ]
          ),
          transform: Matrix4.rotationZ(.2), //卡片倾斜变换
          alignment: Alignment.center, //卡片内文字居中
          child: Text( //卡片文字
            "4.12", style: TextStyle(color: Colors.white, fontSize: 40.0),
          ),
        )