Flutter学习--Container组件

一、介绍

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.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.topLeft	垂直靠顶部水平靠左对齐
Alignment.topCenter	垂直靠顶部水平居中对齐
Alignment.topRight	垂直靠顶部水平靠右对齐
Alignment.centerLeft	垂直居中水平靠左对齐
Alignment.center	垂直和水平居中都对齐
Alignment.centerRight	垂直居中水平靠右对齐
Alignment.bottomLeft	垂直靠底部水平靠左对齐
Alignment.bottomCenter	垂直靠底部水平居中对齐
Alignment.bottomRight	垂直靠底部水平靠右对齐
Alignment(double x, double y)	根据具体的x,y轴偏移量定位

内边距，使用如下

属性	说明
EdgeInsets.all(double value)	上下左右统一设置内边距
EdgeInsets.fromLTRB（double left,double top,double double right,double bottom）	分别设置左上右下的内边距

背景色,不能与 decoration 属性同时设置
装饰，也就是设置背景色、边框、圆角等，不能和color同时使用，Decoration是抽象类，一般使用BoxDecoration的实现类（FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator也是Decoration的实现类）

BoxDecoration的源码

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

BoxDecoration属性

属性	说明
Color color	背景填充颜色
DecorationImage image	使用图片作为装饰
Border border	可以设置边框颜色、边框宽度、边框样式
BorderRadius borderRadius	边框圆角
BoxShadow boxShadow	阴影效果
LinearGradient gradient	设置成渐变效果的背景，会覆盖 color
BlendMode backgroundBlendMode	混合模式

装饰，绘制在child之上，使用方法同decoration
宽
高
约束条件（暂不了解如何使用）
外边距，使用方法同padding
形状变化，简单使用如下

属性	说明
Matrix4.translationValues(double x,double y,double z)	根据x,y,z的值进行平移
Matrix4.diagonal3Values(double x,double y,double z)	根据x,y,z的值进行缩放，正值放大，负值缩小
Matrix4.rotationZ(double z)	根据z轴进行旋转
Matrix4.rotationY(double y)	根据y轴进行旋转
Matrix4.rotationX(double x)	根据x轴进行旋转
Matrix4.skew(double x,double y)	根据x,y轴的值进行扭曲
Matrix4.skewX(double x)	根据x轴的值进行扭曲
Matrix4.skewY(double y)根据y轴的值进行扭曲

子组件

demo

class ContainerTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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),
    ));
  }
}

企业微信截图_16056317458073.png

（整理出来，方便个人查找和学习）