Widget的装饰,使其改变其显示形式。Container的decoration用BoxDecoration来设置。BoxDecoration的参数如下:
属性 | 解释 | 类型 |
---|---|---|
color | 颜色背景 | Color |
image | 图片背景 | DecorationImage |
border | 边界 | BoxBorder |
borderRadius | 圆角边界半径 | BorderRadiusGeometry |
boxShadow | 阴影 | List<BoxShadow> |
gradient | 渐变色 | Gradient |
backgroundBlendMode | 背景混合模式 | BlendMode |
shape | 形状 | BoxShape |
-
color
设置背景颜色,decoration中的color不可与Container的color属性同时设置,设置了decoration后,Container的color必须去掉。定义方式与Container的color定义方式一致。 -
image
设置图片背景,设置image需要一个DecorationImage类,其中image属性是必须的,其类型是ImageProvider,因为ImageProvider是抽象类,因此需要用ImageProvider的子类来实现。 -
border
设置Widget的边框样式,设置方式为Border.xxx,Border为BoxBorder类型。
- border.all(Color color, double width,BorderStyle style)
同时设置上下左右4条边框的样式,color设置颜色,width设置边框宽度,style设置边框样式,style为BorderStyle枚举类型,只有none和solid两个值。none表示无边框,solid表示实线边框。
border.all()的默认颜色是黑色,边框宽度为1.0,样式为BorderStyle.solid。
- Border.symmetric(BorderSide vertical, BorderSide horizontal)
从参数可以看出,是分别设置垂直方向的边框和水平方向的边框,即vertical设置上边和下边的边框,horizontal设置左边和右边的边框。
参数是BorderSide,而BorderSide的参数与border.all的参数一样,都是Color color, double width,BorderStyle style,
- Border.fromBorderSide(BorderSide side)
字面上的意思是从BorderSide中获取样式设置,设置方式与Border.symmetric一致,因为都是BorderSide类型,设置效果与Border.all一致,因为都是同时设置4条边框的样式。
- Border({BorderSide top, BorderSide right, BorderSide bottom, BorderSide left})
四条边框分别设置,可以设置不同的样式
-
borderRadius
设置边框圆角,类型为BorderRadiusGeometry,设置方式为BorderRadius.xxx
- BorderRadius.all(Radius radius)
同时设置4个圆角,参数是Radius,设置正圆角,则用Radius.circular(double radius)。,等同于BorderRadius.circular(double radius);设置椭圆角,则用Radius.elliptical(double x, double y)
- BorderRadius.zero
没有圆角效果
- BorderRadius.horizontal({Radius left, Radius right})
设置水平方向上的圆角,left设置左上和左下两个圆角,right设置右上和右下两个圆角。
- BorderRadius.vertical({Radius top, Radius bottom})
设置垂直方向上的圆角,top设置左上和右上两个圆角,bottom设置左下和右下两个圆角。
- BorderRadius.only({Radius topLeft, Radius topRight, Radius bottomLeft, Radius bottomRight})
单独设置每个角的圆角效果。
-
boxShadow
设置阴影效果。参数类型是List<BoxShadow>,是一个集合,可以看出应该是多个BoxShadow叠加后的效果。BoxShadow参数如下:
- Color color:阴影颜色
- Offset offset:偏移量
- double blurRadius:模糊半径,半径越大越模糊
- double spreadRadius:延伸范围半径,半径越大,阴影范围越广
-
gradient
设置渐变背景色,类型是Gradient,Gradient是抽象类,它有3个实现类:
- 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。
- 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:扫描渐变
网友评论