卡片内容器的边框半径

Question

当我尝试设置卡片中嵌套的容器的顶部两个角的边框半径时，容器的整个内容都会消失。以下是我的代码，如果取消注释掉的行，容器内的所有内容都会消失。

Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5.0),
      ),
      margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: Container(
        decoration: BoxDecoration(
          border: new Border(
              top: BorderSide(
            color: Theme.of(context).primaryColor,
            width: 3.0,
          )),
          //borderRadius: BorderRadius.only(topLeft: const Radius.circular(5.0)),
        ),
        child: makeListTile(widget.flight),
      ),
    );

}

- user2876983

Answer 1

只需要添加

clipBehavior: Clip.antiAlias

到卡片

- Ali mohammadi

---

这是一个非常好的解决方案，困扰了我很长时间！谢谢兄弟。 - Anoop Thiruonam

Answer 2

      Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
        child: Container(
          decoration: BoxDecoration(
            border: new Border(
                top: BorderSide(
              color: Theme.of(context).primaryColor,
              width: 3.0,
            )),
            borderRadius: BorderRadius.only(topLeft: const Radius.circular(20.0)),
            color: Colors.red,
          ),
          height: 100,
          width: 100,
        ),
      )

我尝试了你的代码，它可以正常工作，只是由于卡片的角落外观，角落被隐藏了。你为容器和卡片指定了相同的半径，我只是给容器添加了宽度和高度，并增加了圆形半径以使变化可见。

如果您想要一个只有左上角圆形的卡片，我不知道为什么要在卡片内部使用容器。您可以使用以下代码实现：我建议您查看Flutter中创建卡片的方法。

SizedBox.expand(
          child: Card(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(20)),
              side: BorderSide(width: 2.5, color: Colors.black)),
               margin: EdgeInsets.all(10),
        ),
        )

如果您有任何问题，请随意评论。

- Mahesh Jamdade

---

仅在卡片中进行操作的问题在于我无法仅设置 borderTop 的颜色。 - user2876983

如果您能留下一些图像链接，我可以提供帮助。 - Mahesh Jamdade

如果您查看您的第二个代码框，您会执行 'margin: EdgeInsets.all(10)'。这将设置框边框，而不仅仅是顶部边框。 - user2876983