1、主要是 boxShadow 这个属性

Container(
  width: 50,
  height: 50,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(28)),
    boxShadow: [
      BoxShadow(
          color: Colors.red,  //底色,阴影颜色
          offset: Offset(0, 0), //阴影位置,从什么位置开始
          blurRadius: 1,  // 阴影模糊层度
          spreadRadius: 0,  //阴影模糊大小
    ],
  ),
  child: Container(),
),

2、效果,边缘有阴影

 

3、扩展

boxShadow 是一个数组,可以设置多个,效果更炫酷

Container(
  width: 20,
  height: 20,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.all(Radius.circular(20)),
    boxShadow: [
      BoxShadow(color: Colors.green,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 5),
      BoxShadow(color: Colors.yellowAccent,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 4),
      BoxShadow(color: Colors.blue,offset: Offset(0, 0),blurRadius: 1,spreadRadius: 3),
    ],
  ),
  child: Container(),
);

效果

 

 

 

 

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐