Flutter如何实现共享分割线、带彩色边框选中效果的圆角装饰容器列表

这里提供两种可直接落地的实现方式，均满足选中高亮全边框、分割线不重叠的需求，同时避开了Flutter带圆角容器无法单独设置单一边框颜色的限制： #

方案1：边框偏移重叠法 #

核心逻辑是让相邻容器的上下边框重叠1px，从视觉上消除1+1=2的粗线问题，选中时抬高选中容器的层级保证完整显示高亮边框：

• 给所有非首项的容器设置向上偏移1px，刚好覆盖上一个容器的底部边框
• 选中对应容器时，将其层级调整为最高，避免被其他容器遮挡边框
  示例代码片段：

// 定义选中下标
int selectedIndex = 0;
Column(
  mainAxisSize: MainAxisSize.min,
  children: List.generate(3, (index) {
    // 边框圆角配置
    BorderRadius? borderRadius;
    if (index == 0) {
      borderRadius = const BorderRadius.vertical(top: Radius.circular(20));
    } else if (index == 2) {
      borderRadius = const BorderRadius.vertical(bottom: Radius.circular(20));
    }
    return Transform(
      // 非首项向上偏移1px
      transform: Matrix4.translationValues(0, index == 0 ? 0 : -1, 0),
      child: Container(
        height: 100,
        width: 200,
        decoration: BoxDecoration(
          color: selectedIndex == index ? Colors.blue : Colors.white,
          borderRadius: borderRadius,
          border: Border.all(
            width: 1,
            color: selectedIndex == index ? Colors.red : Colors.black,
          ),
        ),
      ),
    );
  }),
)

方案2：外边框+内部分割线分离法 #

核心逻辑是把外边框、内部分割线、选中高亮边框三层拆分，完全避免边框重叠问题：

1. 最外层套一个带外圆角、外边框的容器，负责整体外轮廓
2. 内部容器之间用1px高度的分割线作为共享线，不存在重叠问题
3. 选中的容器单独套一层高亮边框，层级高于分割线和外边框，完整显示四个边的高亮效果
   示例代码片段：

int selectedIndex = 0;
// 外层整体外边框
Container(
  width: 200,
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    border: Border.all(width: 1, color: Colors.black),
  ),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: List.generate(3, (index) {
      Widget item = Container(
        height: 100,
        width: double.infinity,
        color: selectedIndex == index ? Colors.blue : Colors.white,
      );
      // 选中项加高亮边框
      if (selectedIndex == index) {
        item = Container(
          decoration: BoxDecoration(
            border: Border.all(width: 1, color: Colors.red),
          ),
          child: item,
        );
      }
      // 非末项加底部分割线
      if (index != 2) {
        item = Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            item,
            const Divider(height: 1, thickness: 1, color: Colors.black)
          ],
        );
      }
      return item;
    }),
  ),
)

两种方案都可以实现需求，方案1代码量更少，方案2兼容性更强，不会出现边框半透明叠加的问题。 #

内容的提问来源于stack exchange，提问作者Cagu