Image 如何在颤振中使用BoxFit.contain圆角图像角

我的问题是，当我使用具有特定大小的容器包装图像时，该容器使用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,
            ),
          ),
        ),
      ),

    );
  }

---

尝试使用

BoxFit.fill

如果我理解正确，这就是您想要实现的目标：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text("My image size"),
      ),
      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.fill,
            ),
          ),
        ),
      ),
    );
  }

编辑问题的解决方法：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Future<Widget> getImage() async {
      final Completer<Widget> completer = Completer();

      final url = 'https://i.stack.imgur.com/lkd0a.png';
      final image = NetworkImage(url);
      final config = await image.obtainKey(const ImageConfiguration());
      final load = image.load(config);

      final listener = new ImageStreamListener((ImageInfo info, isSync) async {
        print(info.image.width);
        print(info.image.height);

        completer.complete(Container(
            child: Image(
          image: image,
          height: info.image.height.toDouble(),
          width: info.image.width.toDouble(),
        )));
      });

      load.addListener(listener);
      return completer.future;
    }

    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text("My image size"),
      ),
      body: Center(
        child: FutureBuilder<Widget>(
          future: getImage(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return snapshot.data;
            } else {
              return Text('LOADING...');
            }
          },
        ),
      ),
    );
  }
}

类MyWidget扩展了无状态Widget{
@凌驾
小部件构建（构建上下文）{
Future getImage（）异步{
最终完成者完成者=完成者（）；
最终url=https://i.stack.imgur.com/lkd0a.png';
最终图像=网络图像（url）；
final config=await image.obtainKey（const-ImageConfiguration（））；
最终加载=image.load（配置）；
最终侦听器=新的ImageStreamListener（（ImageInfo，isSync）异步{
打印（信息、图像、宽度）；
打印（信息、图像、高度）；
完成（容器）(
孩子：图像(
图像：图像，
高度：info.image.height.toDouble（），
宽度：info.image.width.toDouble（），
)));
});
load.addListener（listener）；
返回completer.future；
}
返回脚手架(
背景颜色：颜色。灰色，
appBar:appBar(
标题：文本（“我的图像大小”），
),
正文：中(
孩子：未来建设者(
future:getImage（），
生成器：（上下文，快照）{
if（snapshot.hasData）{
返回快照数据；
}否则{
返回文本（'加载…'）；
}
},
),
),
);
}
}

您必须将

ClipRRect

小部件与

Center

或任何

Align

小部件包装在一起

如果父控件未指定任何对齐属性，则大多数小部件将尝试填充其父控件

在您的例子中，

ClipRRect

填充了其父

容器

（300x300），因为容器没有指定与其子容器的任何对齐方式。带有

contain

属性的图像将尝试保持图像比率，并集中在

ClipRRect

小部件中。因此，它使

ClipRRect

角不可见或没有效果

演示：

---

编辑：这里我使用了

Center

小部件。但是您也可以在

容器

小部件中简单地指定对齐属性。

您可以简单地用带有flatter的ClipOval包装小部件

看看这个文档：

使用堆栈

Stack(
  children: <Widget>[
  ],
)

---

我不完全明白你的问题是什么。我知道你想使用Boxfit.container，但到底是什么让你烦恼？容器的背景、图像大小或其他什么？@Iammuratc我想剪辑我的图像，而不是容器。添加容器只是为了显示我的空间有限。我将ClipRect添加为Image.network的父对象，但图片没有任何变化。

BoxFit.fill

对于垂直方形图像来说不太合适，就像您使用

BoxFit.cover时那样。cover

您不能同时使用这两种方法，您希望忽略纵横比来填充方框，但您希望保留纵横比，以便图像仍然看起来不错。或者，您可以尝试使用

ImageStreamListener

，根据从

ImageInfo

获得的图像大小调整您的框，检查我的编辑，如果这是您想要的。谢谢您的回答这是我想要的，这将正常工作。你能给我解释一下为什么我们应该使用对齐或居中小部件吗？

Stack(
  children: <Widget>[
  ],
)

 Container(
      decoration: Box Decoration(
        image: Decoration Image(
          image: Asset Image('images/new_york.jpg'),
          fit: Box Fit . fit Height,
        ),
      ),
    ),