如何創建帶有彩色邊框顫動的裝飾圓形容器共享相同的分隔線

我正在嘗試復制下面的串列視圖。這是一個串列視圖（或容器），您可以選擇它，它將使邊框著色并應用容器之間沒有填充的背景，但有一點，它們共享相同的分隔線。我已經對此進行了嘗試，但并沒有像我預期的那樣作業。因為分隔線加倍（更粗），這有點煩人。

我想要的是：

編輯：

它們是可選擇的容器，因此您可以單擊每個容器，它會突出顯示邊框，因此如果您正在考慮將中間容器制作為僅在右側和左側帶有邊框的容器，那么它將不起作用，因為您將無法突出顯示頂部和底部邊框。

請參閱以下示例：

我試圖使底部邊框透明 ( 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),
          ),
        ),

uj5u.com熱心網友回復：

對于中間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,
                ),
              ),
            ),
          ),

uj5u.com熱心網友回復：

嘗試這個：

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

標籤：扑 颤振布局

上一篇：未處理的例外：型別“XFile”不是型別轉換中“PickedFile”型別的子型別

下一篇：Spring@Value回傳<empty>