Flutter BoxDecoration

在 Flutter 里decoration一般就是指BoxDecoration用来给组件加背景、边框、圆角、阴影、渐变这些样式。结合你刚才在写的ClipRRectBackdropFilter我给你最实用、最常用的用法。1. 最基础写法dartContainer( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(16), ), )2. 常用属性一览dartBoxDecoration( color: Colors.white, // 背景色 borderRadius: BorderRadius.circular(16), // 圆角 border: Border.all( // 边框 color: Colors.grey, width: 1, ), boxShadow: [ // 阴影 BoxShadow( color: Colors.black12, blurRadius: 10, offset: Offset(0, 4), ), ], gradient: LinearGradient(...), // 渐变 image: DecorationImage(...), // 背景图 )3. 圆角和你前面的 borderRadius 一样dartborderRadius: BorderRadius.circular(20), // 或者只对某些角圆角 borderRadius: BorderRadius.only( topLeft: Radius.circular(20), topRight: Radius.circular(20), ),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), ), child: Center(child: Text(毛玻璃)), ), ), )5. 注意一个大坑如果 Container 用了 decoration就不能再用 color 属性错误dartContainer( color: Colors.red, // 冲突 decoration: BoxDecoration(...), )正确dartContainer( decoration: BoxDecoration( color: Colors.red, ), )