Flutter 基本组件之Container

基本组件 -- Container

容器，一个常用的组件，是一个方便绘制、定位和调整子组件大小的组件.
负责创建矩形的可视元素，可以用BoxDecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制。

构造方法

Container({
    Key key,
    this.alignment,//控制child的对齐方式
    this.padding, //设置内边距
    Color color, //设置背景颜色
    Decoration decoration,//绘制在child下层的装饰，不能与color同时使用
    this.foregroundDecoration,//绘制在child上层的装饰
    double width, //宽
    double height, //高
    BoxConstraints constraints,添加到child上额外的约束条件
    this.margin,//外边距
    this.transform,//设置container的变换矩阵，类型为Matrix4
    this.child, //子组件
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'）

常用属性

属性名	功能	值所属类型
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	容器子元素	Widget

BoxDecoration 的构造方法

 const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    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.'
       );

代码

/*
 * Container 组价 
 */
class ContainerView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200.0,
      width: 200.0,
      //    color: Colors.blueGrey,
      alignment: Alignment.centerLeft, // 相对子元素对齐方式
      child: Text("zhangssr"),
      margin: EdgeInsets.all(30.0), //外边距
      padding: EdgeInsets.fromLTRB(30.0, 0, 0, 0), //内间距
      transform: Matrix4.skewY(0.3),
      decoration: BoxDecoration(
        //装饰，背景边框等，不能与 color 属性同时设置，会绘制在 child 之下，也就是会被 child 覆盖
        color: Colors.blue,
        //背景边框
        border: Border.all(
            //边框颜色
            color: Colors.blue,
            //边框宽度
            width: 5),
        // 边框圆角
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(5.0),
            topRight: Radius.circular(10.0),
            bottomLeft: Radius.circular(15.0),
            bottomRight: Radius.circular(20.0)),
        //渐变效果，会覆盖 color
        gradient: LinearGradient(
            colors: [Color(0xFFFFDEAD), Color(0xFF98FB98), Color(0xFF6495ED)]),
        //阴影效果
        boxShadow: [BoxShadow(color: Color(0xFFFF0000), blurRadius: 5.0)],
        //应该是背景混合模式，这个应该比较复杂，后面再研究
        backgroundBlendMode: BlendMode.color,
      ),
    );
  }
}

image.png