image - 如何在 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角落不可见或没有效果。

演示: Dartpad

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 中指定对齐属性小部件。