如何在 flutter 中使用 BoxFit.contain 圆化图像角

Question

我的问题是，当我用具有特定大小的容器包装图像并使用 BoxFit.contain 属性时，它不会舍入图像。查看下图：
我认为图像不能自行变圆，因为它不能扩展以填充容器。我知道我可以使用 BoxFit.cover，但我想使用 BoxFit.contain，因为我的空间和图像可以是任何尺寸。我的代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          height: 300,
          width: 300,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.network(
              'https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg',
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),

    );
  }

Answer 1

您必须ClipRRect用Center或任何Align小部件包装您的小部件。

如果父级没有指定任何对齐属性，大多数小部件将尝试填充其父级。

在您的情况下，ClipRRect填充了其父级Container（300x300），因为容器未指定与其子级的任何对齐方式。具有属性的图像contain将尝试保持图像比例并在小部件中居中ClipRRect。所以它使ClipRRect角落不可见或没有效果。

演示： 飞镖板

Scaffold(
  backgroundColor: Colors.grey,
  appBar: AppBar(
    title: Text("My image size"),
  ),
  body: Center(
    child: Container(
      color: Colors.red,
      height: 300,
      width: 300,
      child: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Image.network(
            'https://mfiles.alphacoders.com/847/847991.jpg',
            fit: BoxFit.contain,
          ),
        ),
      ),
    ),
  ),
)

编辑：这里我使用了Center小部件。但您也可以简单地在小部件中指定对齐属性Container。