Flutter BoxDecoration border 完整用法

border是BoxDecoration的属性用来给 Container 加边框只支持矩形边框。1. 完整四边统一边框dartBoxDecoration( border: Border.all( color: Colors.blue, // 颜色 width: 2, // 粗细 strokeAlign: BorderSide.strokeAlignInside, // 对齐方式 ), )2. 分别设置四条边上下左右dartBoxDecoration( border: Border( top: BorderSide(color: Colors.red, width: 1), bottom: BorderSide(color: Colors.green, width: 2), left: BorderSide(color: Colors.orange, width: 1), right: BorderSide(color: Colors.purple, width: 1), ), )3. 常用属性BorderSidedartBorderSide( color: Colors.black, // 颜色 width: 1.5, // 宽度 style: BorderStyle.solid, // 实线 solid / 无 none strokeAlign: BorderSide.strokeAlignCenter, // 居中/内侧/外侧 )strokeAlign 对齐很关键strokeAlignInside边框向内不占外部尺寸strokeAlignCenter边框居中一半内一半外strokeAlignOutside边框向外4. 边框 圆角必须一起写在 decoration 里dartBoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(12), // 圆角 border: Border.all(color: Colors.grey, width: 1), // 边框 )5. 毛玻璃 边框常用写法dartClipRRect( borderRadius: BorderRadius.circular(16), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), child: Container( width: 200, height: 200, decoration: BoxDecoration( color: Colors.white.withOpacity(0.1), borderRadius: BorderRadius.circular(16), border: Border.all( color: Colors.white.withOpacity(0.3), width: 1.5, ), ), ), ), )6. 常见错误不要同时用Container(color:...)decoration加了圆角就不要再外层用 ClipRRect 重复裁剪容易性能浪费无边框用border: Border.none