Flutter BoxDecoration boxShadow 完整用法

张开发
• 2026/4/14 2:23:29 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Flutter BoxDecoration boxShadow 完整用法
boxShadow是BoxDecoration的属性用来加阴影接收一个数组可以同时加多层阴影。1. 最常用写法单阴影dartBoxDecoration( boxShadow: [ BoxShadow( color: Colors.black12, // 阴影颜色 blurRadius: 10, // 模糊程度 spreadRadius: 2, // 扩散范围 offset: Offset(0, 4), // 偏移 (x, y) ), ], )2. 每个参数说明color阴影颜色一般带透明度Colors.black12/0x11000000blurRadius模糊半径越大越模糊spreadRadius扩散大小正数变大负数变小offset偏移Offset(0,0)居中Offset(0,4)向下阴影Offset(2,2)右下阴影3. 多层阴影质感更强dartboxShadow: [ BoxShadow( color: Color(0x08000000), blurRadius: 15, offset: Offset(0, 6), ), BoxShadow( color: Color(0x0A000000), blurRadius: 30, offset: Offset(0, 12), ), ]4. 毛玻璃 圆角 阴影你现在的组合dartClipRRect( borderRadius: BorderRadius.circular(20), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), child: Container( width: 300, height: 200, decoration: BoxDecoration( color: Colors.white.withOpacity(0.15), borderRadius: BorderRadius.circular(20), border: Border.all( color: Colors.white.withOpacity(0.2), width: 1, ), // 阴影 boxShadow: [ BoxShadow( color: Colors.black12, blurRadius: 20, spreadRadius: 1, offset: Offset(0, 8), ), ], ), ), ), )5. 小坑阴影要半透明颜色才自然阴影太大、太多层会卡顿加了阴影后ClipRRect可能会裁掉阴影需要给父组件留空间

更多文章