如何创建带有彩色边框 flutter 的装饰圆形容器共享相同的分隔线

Question

我正在尝试复制下面的列表视图。 这是一个列表视图（或容器），您可以使用 select，它会使边框着色并应用容器之间没有填充的背景，但有一点，它们共享相同的分隔线。 我已经对此进行了尝试，但并没有像我预期的那样工作。 因为分隔线加倍（更厚），这有点烦人。

我想要的是：

编辑：

它们是可选择的容器，因此您可以单击每个容器，它会突出显示边框，因此如果您想制作一个仅在右侧和左侧有边框的中间容器，它将无法工作，因为您将无法突出显示顶部和底部边框。

请参见下面的示例：

我试图使第一个底部边框透明的容器（ bottom: BorderSide(width: 1, color: Colors.transparent), ），所以它不会加倍。 但似乎您不能在 flutter 中拥有具有不同边框 colors 的半径容器。

我做了什么：

Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              topLeft: Radius.circular(20),
            ),
            border: Border.all(width: 1, color: Colors.red),
          ),
        ),
        Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
              border: Border.all(width: 1, color: Colors.black)),
        ),
        Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(20),
              bottomLeft: Radius.circular(20),
            ),
            border: Border.all(width: 1, color: Colors.black),
          ),
        ),

Answer 1

对于中间Container ，只使用border:Border(left:,right:)

   Container(
            height: 100,
            width: 200,
            decoration: const BoxDecoration(
              border: Border(
                left: BorderSide(
                  color: Colors.green,
                  width: 1,
                ),
                right: BorderSide(
                  color: Colors.green,
                  width: 1,
                ),
              ),
            ),
          ),

Answer 2

尝试这个：

Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              topLeft: Radius.circular(20),
            ),
            border: isTopSelected ? Border.all(width: 1, color: Colors.red) : 
              Border(
                top: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
                left: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
                right: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
              ),
          ),
        ),
        Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
              border: isMiddleSelected ? Border.all(width: 1, color: Colors.red) :
                Border.all(width: 1, color: Colors.Black),
          ),
        ),
        Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(20),
              bottomLeft: Radius.circular(20),
            ),
            border: isBottomSelected ? Border.all(width: 1, color: Colors.red) : 
              Border(
                bottom: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
                left: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
                right: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
              ),
          ),
        ),