美文网首页FlutterFlutter
Flutter -- BoxDecoration详解

Flutter -- BoxDecoration详解

作者: jancywen | 来源:发表于2021-02-04 10:26 被阅读0次

    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类型。

    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。
    1. Border.symmetric(BorderSide vertical, BorderSide horizontal)
      从参数可以看出,是分别设置垂直方向的边框和水平方向的边框,即vertical设置上边和下边的边框,horizontal设置左边和右边的边框。
      参数是BorderSide,而BorderSide的参数与border.all的参数一样,都是Color color, double width,BorderStyle style,
    1. Border.fromBorderSide(BorderSide side)
      字面上的意思是从BorderSide中获取样式设置,设置方式与Border.symmetric一致,因为都是BorderSide类型,设置效果与Border.all一致,因为都是同时设置4条边框的样式。
    1. 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)
    1. BorderRadius.zero
      没有圆角效果
    1. BorderRadius.horizontal({Radius left, Radius right})
      设置水平方向上的圆角,left设置左上和左下两个圆角,right设置右上和右下两个圆角。
    1. BorderRadius.vertical({Radius top, Radius bottom})
      设置垂直方向上的圆角,top设置左上和右上两个圆角,bottom设置左下和右下两个圆角。
    1. 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。
    1. 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:扫描渐变

    相关文章

      网友评论

        本文标题:Flutter -- BoxDecoration详解

        本文链接:https://www.haomeiwen.com/subject/frjytltx.html