如何在颤动中使用 BoxFit.contain 圆角图像答案

【问题标题】：How to Round image corners with BoxFit.contain in flutter如何在颤动中使用 BoxFit.contain 圆角图像
【发布时间】：2020-08-31 06:59:28
【问题描述】：

我的问题是，当我使用具有特定大小的容器包装图像并使用 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.container，但究竟是什么困扰着您？容器的背景、图片大小还是其他？
@Iammuratc 我想剪辑我的图像，而不是容器。添加的容器只是为了显示我的空间有限。我将 ClipRrect 作为父级添加到 Image.network，但图片没有发生任何事情。

标签： image flutter flutter-layout

【解决方案1】：

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

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

在您的情况下，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 小部件中指定对齐属性。

【讨论】：

感谢您的回答这是我想要的，这将正常工作。你能解释一下为什么我们应该使用对齐或居中小部件吗？

【解决方案2】：

如果我理解正确，请尝试使用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,
            ),
          ),
        ),
      ),
    );
  }

Put in a codepen demo

编辑您的问题的解决方法：

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...');
            }
          },
        ),
      ),
    );
  }
}

【讨论】：

BoxFit.fill 不适合像 image 这样的垂直平方图像
然后你使用BoxFit.cover你不能同时拥有它，你想忽略纵横比来填充你的盒子，但你想保留纵横比以便图像仍然看起来不错。或者，您可以尝试使用ImageStreamListener 并调整您的框以适应您从ImageInfo 获得的图像大小，如果那是您正在寻找的，请检查我的编辑。

【解决方案3】：

您可以简单地使用带有颤振的 ClipOval 包装小部件。

看看这个文档：https://api.flutter.dev/flutter/widgets/ClipOval-class.html

【讨论】：

【解决方案4】：

使用堆栈

Stack(
  children: <Widget>[
  ],
)

在这里，我只是使用一个容器，里面有一个图像

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

【讨论】：