Flutter -- BoxDecoration详解

Widget的装饰，使其改变其显示形式。Container的decoration用BoxDecoration来设置。BoxDecoration的参数如下：

• color
  设置背景颜色，decoration中的color不可与Container的color属性同时设置，设置了decoration后，Container的color必须去掉。定义方式与Container的color定义方式一致。

• image
  设置图片背景，设置image需要一个DecorationImage类，其中image属性是必须的，其类型是ImageProvider，因为ImageProvider是抽象类，因此需要用ImageProvider的子类来实现。

• border
  设置Widget的边框样式，设置方式为Border.xxx，Border为BoxBorder类型。

1. border.all(Color color, double width,BorderStyle style)
   同时设置上下左右4条边框的样式，color设置颜色，width设置边框宽度，style设置边框样式，style为BorderStyle枚举类型，只有none和solid两个值。none表示无边框，solid表示实线边框。
   border.all()的默认颜色是黑色，边框宽度为1.0，样式为BorderStyle.solid。

2. Border.symmetric(BorderSide vertical, BorderSide horizontal)
   从参数可以看出，是分别设置垂直方向的边框和水平方向的边框，即vertical设置上边和下边的边框，horizontal设置左边和右边的边框。
   参数是BorderSide，而BorderSide的参数与border.all的参数一样，都是Color color, double width,BorderStyle style，

3. Border.fromBorderSide(BorderSide side)
   字面上的意思是从BorderSide中获取样式设置，设置方式与Border.symmetric一致，因为都是BorderSide类型，设置效果与Border.all一致，因为都是同时设置4条边框的样式。

4. Border({BorderSide top, BorderSide right, BorderSide bottom, BorderSide left})
   四条边框分别设置，可以设置不同的样式

• borderRadius
  设置边框圆角，类型为BorderRadiusGeometry，设置方式为BorderRadius.xxx

1. BorderRadius.all(Radius radius)
   同时设置4个圆角，参数是Radius，设置正圆角，则用Radius.circular(double radius)。，等同于BorderRadius.circular(double radius)；设置椭圆角，则用Radius.elliptical(double x, double y)

2. BorderRadius.zero
   没有圆角效果

3. BorderRadius.horizontal({Radius left, Radius right})
   设置水平方向上的圆角，left设置左上和左下两个圆角，right设置右上和右下两个圆角。

4. BorderRadius.vertical({Radius top, Radius bottom})
   设置垂直方向上的圆角，top设置左上和右上两个圆角，bottom设置左下和右下两个圆角。

5. BorderRadius.only({Radius topLeft, Radius topRight, Radius bottomLeft, Radius bottomRight})
   单独设置每个角的圆角效果。

• boxShadow
  设置阴影效果。参数类型是List<BoxShadow>，是一个集合，可以看出应该是多个BoxShadow叠加后的效果。BoxShadow参数如下：

1. Color color：阴影颜色
2. Offset offset：偏移量
3. double blurRadius：模糊半径，半径越大越模糊
4. double spreadRadius：延伸范围半径，半径越大，阴影范围越广

• gradient
  设置渐变背景色，类型是Gradient，Gradient是抽象类，它有3个实现类：

1. LinearGradient：线性渐变
   LinearGradient(AlignmentGeometry begin, AlignmentGeometry end, List<Color> colors, List<double> stops, TileMode tileMode, GradientTransform transform)

• colors ：渐变色数组，不可为空
• stops：渐变色的终止百分比位置的数组，可为空。取值范围是0.0 ~ 1.0
• begin end：AlignmentGeometry类型
• tileMode：平铺模式，共有三种模式，TileMode.clamp TileMode.repeated TileMode.mirror，默认模式是TileMode.clamp。

2. RadialGradient：放射渐变
   RadialGradient({AlignmentGeometry center, double radius, List<Color> colors, List<double> stops, TileMode tileMode, AlignmentGeometry focal, double focalRadius})
   其中colors stops 和线性渐变一样，接下来说说剩下的几个参数：

• center：扫描区域的中心位置，也就是圆心的位置，默认是Alignment.center
• radius：扫描渐变区域半径比例，默认为0.5
• SweepGradient：扫描渐变