如何在flutter中用BoxFit.contains把图片的边角磨圆

Question

我的问题是，当我用一个具有特定大小的容器包装图像，并使用BoxFit.contains属性时，它不会使图像变圆。 我想图片不能自圆其说是因为它不能展开来填充容器。我知道我可以使用BoxFit.cover，但我想使用BoxFit.contains，因为我的空间有限，而且图像可以是任何大小。 我的代码。

@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 widget。但你也可以简单地在 Container 小组件。

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

把一个codepen演示

EDIT为你的问题提供了一个变通的方法。

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

Answer 3

您可以简单地用带有flutter的ClipOval包裹widget。

看看这个文档。https:/api.flutter.devflutterwidgetsClipOval-class.html。