卡片内容器的边框半径答案

【问题标题】：Border radius of container inside card卡片内容器的边框半径
【发布时间】：2019-11-17 00:13:35
【问题描述】：

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

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

}

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

只需添加

clipBehavior: Clip.antiAlias

到卡

【讨论】：

这是一个很好的解决方案，困扰了我很长时间！谢谢兄弟

【解决方案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,
        ),
      )

我试过你的代码，它工作得很好，只是因为卡片的角落看起来你为容器和卡片指定了相同的半径，所以角落被隐藏了，我只是为容器添加了宽度和高度，并增加了圆形半径来制作变化可见，

如果你想要一张只有左上角圆形的卡片，我不知道你为什么要在卡片内使用容器，那么你可以通过下面的代码来做到这一点，我建议你看看the ways of creating cards in 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),
        ),
        )

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

【讨论】：

只在卡片中做的问题是我不能只设置borderTop颜色。
如果你能留下一些图片链接我可以帮忙
如果您查看第二个代码框，您会执行 'margin: EdgeInsets.all(10)' 。这将设置框边框而不是仅设置顶部边框