Flutter中使用ClipRRect()的一个问题

Question

我在 UI 中使用了 ClipRRect 来实现圆角。 ClipRRect 包装的 topContent 和 BottomContent 分别是一个堆栈和一个列。但是，底角不是圆的。这背后的原因可能是什么？

本例中，cardModel 类用于存储图像路径。

    class FeaturedCard extends StatelessWidget {
     final FeaturedCardModel cardModel;
     final double parallaxPercent;

  FeaturedCard({
    this.cardModel,
    this.parallaxPercent = 0.0, //default value
  });

  @override
  Widget build(BuildContext context) {
    final topContent = Stack(
      children: <Widget>[
        Container(
            padding: EdgeInsets.only(
              left: 10.0,
            ),
            height: MediaQuery.of(context).size.height * 0.3,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage(cardModel.imgUrl),
                fit: BoxFit.fill,
              ),
            )),
      ],
    );

    final bottomContentText = Text(
      'This is the sample text',
      style: TextStyle(fontSize: 18.0),
    );

    final bottomContent = Container(
      height: MediaQuery.of(context).size.height * 0.5,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,
      padding: EdgeInsets.all(40.0),
      child: Center(
        child:
            bottomContentText,
        ),
      );

    return ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
      child: Column(
        children: <Widget>[
          topContent,
          bottomContent,
        ],
      ),
    );
   }
  }

Answer 1

如果您转到 Flutter Inspector 并执行“Toggle Debug Paint”，您将看到剪切发生在下面的蓝色区域。

您可以通过给剪刀指定尺寸来修复它。

return SizedBox(
  height: MediaQuery.of(context).size.height * 0.8,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(16.0),
    child: Column(
      children: <Widget>[
        topContent,
        //bottomContent,
      ],
    ),
  ),
);

Answer 2

作为

ClipRRect

子级的列占用了尽可能多的空间。因此边框半径应用于屏幕底部。 要解决这个问题，您只需将

mainAxisSize

的

Column

属性设置为

MainAxisSize.min

:

return ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          topContent,
          bottomContent,
        ],
      ),
    );

Answer 3

剪辑R矩形( borderRadius: BorderRadius.circular(10), 子项：容器（ width: 100, // 指定宽度 height: 100, // 指定高度 颜色: 颜色.蓝色, 孩子：中心（ 孩子：文本（ 'ClipRRect 示例', 样式：TextStyle（颜色：Colors.white）， ), ), ), )