Flutter中带有右侧边框的圆角卡片小部件

Question

我需要创建一个像这样的卡片：

我写了下面的代码来实现所需的UI，但它并没有像预期的那样工作。

Card(
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomRight: Radius.circular(10),
      topRight: Radius.circular(10)),
    side: BorderSide(width: 5, color: Colors.green)),
  child: ListTile(),
)

上面的代码生成了这个：

使用以下代码：

Card(
  elevation: 5,
  shape: Border(right: BorderSide(color: Colors.red, width: 5)),
  child: ListTile(),
)

生成了以下输出：

我该如何在Flutter中创建所需的UI界面？

- David Bronn

---

也许你可以尝试使用ClipOval将你的卡片进行包装。 - mirkancal

Answer 1

使用Card小部件中的形状参数，示例：

在Card小部件中使用形状参数，例如：

Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container() )

- Julian Shaw

Answer 2

我使用了ClipPath来实现问题中要求的UI，请查看下面的代码。

Card(
     elevation: 2,
     child: ClipPath(
       child: Container(
              height: 100,
              decoration: BoxDecoration(
              border: Border(right: BorderSide(color: Colors.green, width: 5))),
            ),
       clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(3))),
               ),
    )

这会产生以下输出，

如果有更好的方法来实现所述结果，请回答。

- David Bronn

---

@david-bronn，请看一下我的回答，因为我在按照你的方式实现时遇到了问题。我的卡片上有白色的角落。 - GoharSahi

Answer 3

这个解决方案适用于我。如果我们从卡片中删除 shape 属性，它会留下矩形的白色角落。没有任何 elevation 的限制。

              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15.0),
                ),
                shadowColor: Colors.blueAccent,
                elevation: 15,
                child: ClipPath(
                  clipper: ShapeBorderClipper(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15))),
                  child: Container(
                    height: 180,
                      decoration: BoxDecoration(
                        border: Border(
                            left: BorderSide(color: Colors.red, width: 15)),
                        color: Colors.yellowAccent.shade100,
                      ),
                      padding: EdgeInsets.all(20.0),
                      alignment: Alignment.centerLeft,
                      child: Container()),
                ),
              )

- GoharSahi

---

在我尝试的所有答案中，只有这个才能正确地工作。 - Ian

同样的情况，谢谢 @Ian - giorgio79

Answer 4

您应该将您的Card放置在一个ClipRRect小部件内:

     return ClipRRect(
              borderRadius: BorderRadius.circular(15.0),
              child: Card(
                elevation: 5,
                shape: Border(right: BorderSide(color: Colors.red, width: 5)),
                child: ListTile(),
       ),
     );

但是我建议你减少elevation的值，因为它会扭曲小圆形边框。

- Mazin Ibrahim

---

很遗憾，这只是对卡片和阴影进行了剪裁，没有重现圆角卡片的效果。 - Ian

这会破坏卡片的材料特性。不要这样做。 - Rebar

Answer 5

对我来说，所有使用裁剪的解决方案都会截取一部分阴影。不管怎样，我找到了一个更简单的解决方案:

将卡片的子元素包装在一个容器小部件中。为卡片指定圆角矩形边框，然后为容器指定彩色边框侧。

Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
    child: Container(
        decoration: BoxDecoration(
            border: Border(right: BorderSide(color: Colors.red, width: 8)
        ),
        child: // your card content
    )
)

- dast

---

遗憾的是，边框从卡片主体延伸到圆角的外部。 - Ian

Answer 6

您可以在Card中使用clipBehavior，并将BorderSide移动到Container中。

      Card(
            clipBehavior: Clip.antiAlias,
            child: Container(
              height: 100,
              decoration: BoxDecoration(
                  border: Border(
                      right: BorderSide(color: Colors.green, width: 5))),
            ),
          )

- Gabriel Aguirre

Answer 7

1. 对于右侧弯曲的边框，您可以使用：

            child: Card(
                elevation: 6.0,
                color: Colors.amber,
                clipBehavior: Clip.hardEdge,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Container(
                  height: 200,
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(right: 14),
                  decoration: const BoxDecoration(
                    color: Colors.white,
                  ),
                ),
              ),

输出：

额外提示：您可以使用 圆角边框 进行创建

            child: Card(
                elevation: 6.0,
                color: Colors.amber,
                clipBehavior: Clip.hardEdge,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Container(
                  height: 200,
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(right: 10),
                  decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.horizontal(
                        right: Radius.circular(20),
                      )),
                ),
              ),

输出：

---

对于左侧弯曲的边框，您可以使用：

              child: Card(
                elevation: 6.0,
                color: Colors.amber,
                clipBehavior: Clip.hardEdge,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Container(
                  height: 200,
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(left: 10),
                  decoration: const BoxDecoration(
                    color: Colors.white,
                  ),
                ),
              ),

输出：

额外提示：您可以使用以下代码创建圆角边框：

              child: Card(
                elevation: 6.0,
                color: Colors.amber,
                clipBehavior: Clip.hardEdge,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Container(
                  height: 200,
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(left: 10),
                  decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.horizontal(
                        left: Radius.circular(20),
                      )),
                ),
              ),

输出：

- Agni Gari

Answer 8

除了使用卡片，您还可以使用容器来实现这一点，您可以在BoxDecoration上使用gradient属性。 stops属性将确定您边框的宽度。然后，您可以添加颜色并获得漂亮的边框。

对于圆角，您只需使用borderRadius属性即可。

Container(
          margin: EdgeInsets.symmetric(
            horizontal: 4.0,
            vertical: 8.0,
          ),
          padding: EdgeInsets.symmetric(
            horizontal: 8.0,
            vertical: 12.0,
          ),
          child: Text('A "card" with rounded edges and a border'),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              stops: [0.015, 0.015],
              colors: [
                Colors.blue,
                Colors.white,
              ],
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(5.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.grey,
                blurRadius: 4.0,
                offset: Offset(0.0, 1.5),
              ),
            ],
          ),
        )

上述代码的结果

- FireFixon