美文网首页
flutter空间-BoxDecoration 装饰器

flutter空间-BoxDecoration 装饰器

作者: 张果果灬 | 来源:发表于2023-08-09 15:09 被阅读0次

    BoxDecoration 装饰器有以下属性:
    1.color 颜色 设置背景颜色 Colors.red
    2.border 边框
    3.borderRadius 圆角
    4.boxShadow 阴影
    5.gradient 渐变
    6.image 图片

    Color 颜色设置:
    Colors.red 用这个方法来设置颜色。

    Border 边框设置:
    1.border: Border(top: BorderSide(width: 15,color: Colors.red),right: BorderSide(width: 5,color: Colors.blue),left: BorderSide(width: 5,color: Colors.yellow),bottom: BorderSide(width: 5,color: Colors.green) ) 单边设置

    1. border: Border.all(color: Colors.red,width: 20,style:BorderStyle.solid) //整体设置
    2. border: Border.fromBorderSide(borderSide) //通过borderSide 设置
      4.border: Border.symmetric(vertical: BorderSide(width: 40,color: Colors.blue,style: BorderStyle.solid),horizontal: BorderSide(width: 50,color: Colors.red,style: BorderStyle.solid)),//对称设置

    BorderRadius 圆角设置:

    1. borderRadius:BorderRadius.all(Radius.circular(10)) //整体设置
      2.borderRadius: BorderRadius.horizontal(left: Radius.circular(20),right:Radius.circular(10)) // 对称设置
      3.borderRadius: BorderRadius.vertical(top: Radius.circular(20),bottom: Radius.circular(40)),
      4.BorderRadius.only 单脚设置

    BoxShadow 阴影设置:
    1.boxShadow: [BoxShadow(
    color: Colors.grey, //阴影颜色
    offset: Offset(10, 4), //偏移量
    spreadRadius: 2,///阴影大小
    blurRadius: 4,///阴影模糊大小
    blurStyle: BlurStyle.normal //阴影风格
    )]

    Gradient 渐变设置:
    gradient: LinearGradient(///线性渐变
    colors: [Colors.grey,Colors.red,Colors.green],//渐变颜色
    begin: Alignment.bottomLeft, 开始位置
    end: Alignment.centerRight, 结束位置
    stops: [0.4,0.5,0.6] 要和颜色的数量一样
    )
    gradient: RadialGradient(///环形渐变
    // colors: [Colors.grey,Colors.red,Colors.green],
    // radius: 5
    // )
    还有一种扫描渐变

    Image 图片设置:
    image: DecorationImage(///显示网络图片
    image: NetworkImage('https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg'),
    fit: BoxFit.cover
    )
    image: DecorationImage(image: AssetImage("assets/images/game.png")), // 本地图片

    相关文章

      网友评论

          本文标题:flutter空间-BoxDecoration 装饰器

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