Flutter快速上手2：万能容器Container

flutter_ illustration_pic_1.jpeg

如果用类比推理来介绍Container的话，用iOS开发中的View，前端开发的div来形容最好不过啦。

习惯性先点进去看一下

Container({
    Key? key,
    this.alignment,//AlignmentGeometry 容器内 child 的对齐方式
    this.padding,//EdgeInsetsGeometry 容器内边距
    this.color,// Color 容器的背景色 ，有Decoration时设置在Decoration中
    this.decoration, Decoration //Decoration 容器的背景装饰
    this.foregroundDecoration,//Decoration 容器的前景装饰
    double? width,
    double? height,
    BoxConstraints? constraints,//BoxConstraints  容器的大小限制
    this.margin,//容器外边距
    this.transform,//容器的变化
    this.transformAlignment,
    this.child,//容器里显示的 Widget
    this.clipBehavior = Clip.none,
  }) 

Container简单总结
1.未设置约束和固定宽高时，若存在子控件，则原则上Container 和子控件一样大；不存在子控件，则原则上占满全屏。
2.若未设置约束和宽高，但设置了alignment属性,且存在子控件，那么Container 原则上也会占满全屏
3.设置了固定宽高，则无论是否存在子控件，宽高都是固定的。

下面详细介绍一下几个重点属性👇🏻👇🏻👇🏻

一、alignment可使用三种类型的值

• Alignment
• FractionalOffset
• AlignmentDirectional

其中Alignment和FractionalOffset比较类似，而AlignmentDirectional主要用于国际化中左右顺序的支持。

二、margin与padding都使用相同类型的值，即EdgeInsets，该类型共用四种构造方法

1.所有边距为15

margin: const EdgeInsets.all(15), 
padding: const EdgeInsets.all(15), 

2.上下间距30，水平间距15

margin: EdgeInsets.symmetric(vertical: 30, horizontal: 15),

3.每个间距数值不一样：左 上 右 下

margin: EdgeInsets.fromLTRB(15, 30, 30, 20),

4.自定义需要的间距，四个任意组合

EdgeInsets.only(left: 15, right: 15),
EdgeInsets.only(top: 12, bottom: 12),

三、decoration有四种类型，都是Decoration的子类，其中三种在开发中会用到

• BoxDecoration
• ShapeDecoration
• UnderlineTabIndicator
• InputDecoration

以下为BoxDecoration详解

const BoxDecoration({
    this.color,//颜色，加了decoration后，需要设置这个颜色，与Container的属性颜色冲突
    this.image,//绘制图片
    this.border,//边框
    this.borderRadius,//圆角
    this.boxShadow,//阴影
    this.gradient,//过度颜色
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })

（一）圆角绘制有五个构造方法

1.指定圆角

borderRadius: const BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20)
),

2.每个角都相同

borderRadius: const BorderRadius.all(Radius.circular(50)),

3.每个角都相同,比第二种简化

borderRadius: BorderRadius.circular(10),

4.指定顶部和底部圆角值不同

borderRadius: const BorderRadius.vertical(top: Radius.circular(20), bottom: Radius.circular(50))

5.指定左边和右边圆角值不同

borderRadius: const BorderRadius.horizontal(left: Radius.circular(20), right: Radius.circular(50)),

ShapeDecoration 通常是用于单独为四条边框绘制不同的效果，它的属性与BoxDecoration大致相同，其中shape属性是和BoxDecoration中不同的，类型为ShapeBorder，它的取值如下

• Border //绘制四边
• UnderlineInputBorder //绘制底边线
• RoundedRectangleBorder //绘制矩形边框
• CircleBorder //绘制圆形边框
• StadiumBorder //绘制竖向椭圆边框
• BeveledRectangleBorder //绘制八角边框
  本段后面在演示

（二）如果是圆形，直接用这个属性，默认为BoxShape.rectangle

shape: BoxShape.circle,

（三）边框

1.所有的边框同色同款

border: Border.all(color: Colors.red, width: 1),

2.指定上下和左右的颜色，设置这个的时候不能设置shape和border,会冲突，最后效果图展示的就是这个属性

border: const Border.symmetric(
              vertical: BorderSide(color: Colors.green, width: 20),
              horizontal: BorderSide(color: Colors.purple, width: 10)
),

3.创建一条边传进去，这是需要绘制的，后面补上

border: Border.fromBorderSide(side),

（三）阴影

Offset是x和y的偏移量，blurRadius是模糊的宽度，多试几次就找到感觉了😏

boxShadow: const [
            BoxShadow(color: Colors.black, offset: Offset(4, 4), blurRadius: 4)
 ],

20220418140328.jpg

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~