Flutter BoxDecoration border 完整用法

border 是 BoxDecoration 的属性，用来给 Container 加边框，只支持矩形边框。

1. 完整四边统一边框

dart

BoxDecoration(
  border: Border.all(
    color: Colors.blue,   // 颜色
    width: 2,             // 粗细
    strokeAlign: BorderSide.strokeAlignInside, // 对齐方式
  ),
)

2. 分别设置四条边（上下左右）

dart

BoxDecoration(
  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. 常用属性（BorderSide）

dart

BorderSide(
  color: Colors.black,    // 颜色
  width: 1.5,             // 宽度
  style: BorderStyle.solid, // 实线 solid / 无 none
  strokeAlign: BorderSide.strokeAlignCenter, // 居中/内侧/外侧
)

strokeAlign 对齐（很关键）

• strokeAlignInside：边框向内（不占外部尺寸）
• strokeAlignCenter：边框居中（一半内一半外）
• strokeAlignOutside：边框向外

4. 边框 + 圆角（必须一起写在 decoration 里）

dart

BoxDecoration(
  color: Colors.white,
  borderRadius: BorderRadius.circular(12), // 圆角
  border: Border.all(color: Colors.grey, width: 1), // 边框
)

5. 毛玻璃 + 边框常用写法

dart

ClipRRect(
  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