CompoundBorder复合边框组合

本文目录导读：

1. 核心概念
2. 构造函数
3. 什么时候使用？
4. 代码示例
5. 注意事项与坑

在 Flutter 中，CompoundBorder 是 ShapeBorder 类的一个子类，它的作用正如其名：将多个边框形状组合成一个复合边框。

当你需要一个组件同时拥有外边框和内边框（或者多层不同样式的边框）时，CompoundBorder 就是用来解决这个问题的。

核心概念

• CompoundBorder 接收一个 List<ShapeBorder> 作为参数。
• 第一个元素是最外层的边框。
• 最后一个元素是最内层的边框。
• 它会将列表中的所有边框按顺序从外到内绘制。

构造函数

const CompoundBorder({
  List<ShapeBorder> borders = const <ShapeBorder>[],
})

什么时候使用？

1. 多层边框：需要在一个容器（如 Container、Card）四周同时显示多个不同颜色、不同宽度的边框。
2. 外边框 + 内阴影/内边框效果：结合 Border 和 BoxBorder 的不同变体。
3. 自定义装饰：当 BoxDecoration 的单层 border 无法满足复杂视觉需求时。

代码示例

示例 1：基本双层边框

创建一个容器，外边框为蓝色（宽 4px），内边框为红色（宽 2px）。

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    // 使用 CompoundBorder 组合两个 Border
    border: CompoundBorder(
      borders: [
        // 外层边框：蓝色，4px
        Border.all(color: Colors.blue, width: 4),
        // 内层边框：红色，2px
        Border.all(color: Colors.red, width: 2),
      ],
    ),
  ),
)

效果解释：你会看到一个蓝色矩形框，里面紧贴着一个红色矩形框，总宽度为蓝色 4px + 红色 2px = 6px 的复合边框。

示例 2：不同边框样式

可以混合使用不同的边框样式，例如外边框是圆角矩形,内边框是直角。

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    border: CompoundBorder(
      borders: [
        // 外层：圆角矩形边框
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
          side: BorderSide(color: Colors.purple, width: 4),
        ),
        // 内层：直角矩形边框（因为没有设置 borderRadius）
        Border.all(color: Colors.amber, width: 2),
      ],
    ),
  ),
)

注意：内层边框 Border.all 默认是直角，但会被外层圆角矩形裁剪吗？实际上不会自动裁剪，它仍然会绘制在容器边界内，但内层边框不会自动产生圆角，这个例子更多是展示组合的可能性，实际效果需要根据你的 UI 设计来调整。

示例 3：与 BoxDecoration 的其他属性配合

CompoundBorder 可以作为 BoxDecoration 的 border 使用，因此可以同时设置 color、borderRadius、boxShadow 等。

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.grey[200], // 背景色
    borderRadius: BorderRadius.circular(10), // 圆角
    border: CompoundBorder(
      borders: [
        Border.all(color: Colors.black, width: 2),
        Border.all(color: Colors.white, width: 2),
      ],
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
)

效果：一个灰色背景、带阴影、圆角并且拥有黑白双层边框的容器。

注意事项与坑

1. ：CompoundBorder 会占用额外的空间，如果你的容器有严格的大小限制，内层边框可能会挤压子组件（child）的可用空间。
2. 圆角继承：CompoundBorder 本身没有 borderRadius 属性，边框的圆角由列表中的各个 ShapeBorder 自己决定，如果外层是圆角，内层是直角，外层圆角不会自动“传递”给内层。
3. 性能：多层边框意味着多次绘制，对于简单的双层边框，性能影响可忽略不计，如果需要非常复杂的多层边框（如 5 层以上），可以考虑使用 CustomPainter 来实现,代码可能更清晰。
4. 与 OutlinedButton 或 InputDecoration 的关系：在这些小部件中，CompoundBorder 同样可以用来创建自定义的聚焦、悬停或错误状态的复合边框。

一句话：当你的 UI 设计里一个框需要穿两条不同颜色的“裤子”时，CompoundBorder 就是那个串起裤子腰带的连接器。