如何創建帶有彩色邊框 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,
                ),
              ),
          ),
        ),