Border radius of container inside card

Question

When I try to set the border radius of the top two corners of my container that is nested inside a card, the whole content of the container goes disappears. Here is my code, if you uncomment the commented line your whole content inside the container will go away.

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

}

Answer 1

只需添加

clipBehavior: Clip.antiAlias

到卡

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

如果您有任何问题，请随时发表评论