Question

我已经将ClipRRect用于UI中的圆角。 ClipRRect包装topContent和bottomContent分别是一个堆栈和一个Column。但是，底角不是圆的。这可能是什么原因？

在这种情况下，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的{{1}}属性设置为Column：

MainAxisSize.min

Answer 3

我可以像这样使用卡片的形状属性使卡片角变圆：

 Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(40),
        ),
        elevation: 10,
        child: ...

 )

Flutter中使用ClipRRect（）的问题

3 个答案: