Flutter |边框半径不适用于Android

Question

我想找出为什么边框半径不能应用于Android小部件的上半部分的原因。这是Android上的图片

但是在网络上，它的工作方式如下图所示。

有人知道为什么吗？

代码

    Center(
      child: Card(
        elevation: 1.5,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
        child: SizedBox(
          width: 250.0,
          height: 150.0,
          child: Column(
            children: <Widget>[
              Container(
                width: double.infinity,
                height: 60.0,
                color: Colors.pink[200].withOpacity(0.95),
                child: Center(
                  child: Text('Felicity Jones'),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Center(
                    child: Text('9:15'),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    ),

Answer 1

编辑：在提到@Darshan的情况下，您只需在clipBehavior: Clip.antiAlias小部件中设置Card。

如果没有ClipRRect，也可以使用clipBehavior强制子级具有给定的边界半径。

Center(
  child: Card(
    elevation: 1.5,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16.0),
    ),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
      child: SizedBox(
        width: 250.0,
        height: 150.0,
        child: Column(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 60.0,
              color: Colors.pink[200].withOpacity(0.95),
              child: Center(
                child: Text('Felicity Jones'),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Center(
                  child: Text('9:15'),
                ),
              ),
            )
          ],
        ),
      ),
    ),
  ),
)

Answer 2

您可以尝试以下操作：

Center(
    child:
      Card(
          elevation: 1.5,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
          child: SizedBox(
            width: 250.0,
            height: 150.0,
            child: Column(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.vertical(
                        top: new Radius.circular(16.0)
                        ),
                    color: Colors.pink[200].withOpacity(0.95),
                  ),
                  width: double.infinity,
                  height: 60.0,
                  child: Center(
                    child: Text('Felicity Jones'),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Center(
                      child: Text('9:15'),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),

请注意，颜色已在BoxDecoration内部移动，否则将无法编译。我保留了shape属性，以便卡的下部也将变圆。您可以对此进行修改，并在必要时将其删除。

Answer 3

如果暂时将颜色的opacity更改为：，则需要仔细观察：

color: Colors.pink[200].withOpacity(0.2),

您会看到左上角和右上角被切除并且没有用颜色填充：

为了避免这种情况，请使用Card小部件的clipBehavior: Clip.antiAlias,属性以给定的颜色覆盖卡的所有角。这是更新的结果：

希望这能回答您的问题。