我的问题是当我用具有特定大小的容器包装图像并使用 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,
),
),
),
),
);
}
最佳答案
您必须包装您的 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
中指定对齐属性小部件。
关于image - 如何在 flutter 中使用 BoxFit.contain 使图像角变圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61802502/