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

属性名	功能	值所属类型
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是可选关键词，可以省略*