由于子图像的高度和宽度，Flutter ClipRRect 不起作用？

【问题标题】：Flutter ClipRRect not working because of child Image height and width?由于子图像的高度和宽度，Flutter ClipRRect 不起作用？
【发布时间】：2021-05-21 09:47:49
【问题描述】：

我希望用圆角制作我的徽标，并使用 Flutter 的 ClipRRect 做到了这一点。我还想为我的图像设置一个高度和宽度。这些一起使图像看起来从未被圆形。当我从图像中删除设置的高度和宽度时，ClipRRect 使图像变圆，但非常大。

代码：

         body: Container(
            padding: EdgeInsets.all(20),
            child: Column(children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(15.0),
                child: Image.asset('assets/images/logo.png', width: 300, height: 150),
              ),
            ])));

谢谢，感谢所有帮助。

【问题讨论】：

标签： image flutter

【解决方案1】：

清除 container 的填充并为图像小部件使用 fit 属性。

例子

    ClipRRect(
      borderRadius: BorderRadius.circular(75.0),
      child: Image.network(
        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
        height: 150.0,
        width: 150.0,
        fit: BoxFit.cover,
      ),
    ),

使用列小部件树更新容器：

Container(
    child: Column(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(75.0),
          child: Image.network(
            'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
            height: 150.0,
            width: 150.0,
            fit: BoxFit.cover,
          ),
        ),
      ],
    ),
  ),

【讨论】：

非常感谢！