如何创建共享相同分隔线且彩色边框颤动的装饰圆形容器

Question

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

我想要的：

编辑：

它们是可选择的容器，因此您可以单击每个容器，它会突出显示边框，因此如果您正在考虑使中间容器仅在右侧和左侧具有边框，则它将不起作用，因为您不会能够突出显示顶部和底部边框。

请参阅下面的示例：

我试图使第一个底部边框透明的容器（

bottom: BorderSide(width: 1, color: Colors.transparent),

），这样它就不会加倍。但似乎你不能在颤动中使用具有不同边框颜色的半径容器。

我做了什么：

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,
                ),
              ),
          ),
        ),

Answer 3

按照以下步骤操作非常简单。

父容器->列->3容器...

在父容器中你可以给出边框和边框半径。

休息只是基于条件的渲染.. 希望有帮助