Question

我正在尝试创建类似CircleAvatar的东西，但是使用一个Stacked小部件，该小部件具有CircleProgressIndicator和FadeInImage.memoryNetwork作为子级，以便当我在缓慢的Internet上获取图像时获得很好的加载动画（奖金：占位符图像）。其他一切都工作正常，但我无法弄清楚如何将获取的图像裁剪为圆形。我读过here可以使用ClipOval，但是找不到任何有关如何使用它的教程。
代码片段：

Stack(children: <Widget>[
          Center(child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
          Center(
            child: FadeInImage.memoryNetwork(
              placeholder: kTransparentImage,
              image:
                  'https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg',
            ),
          ),
        ],
      ),
    ));

注意：我正在使用transparent_image库作为占位符，以便在显示加载动画时获得透明的占位符。

Answer 1

这是我在一个项目中使用的，我想您可以创建类似的东西，然后不用自定义部件直接使用FadeInImage。

class AvatarFadeImage extends StatelessWidget {
  final String imageUrl;

  AvatarFadeImage(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        image: imageUrl,
        fit: BoxFit.contain,
      ),
    );
  }
}

像这样使用它：

Stack(children: <Widget>[
          Center(child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
          Center(
            child: AvatarFadeImage("https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg"),
          ),
        ],
      ),
    ));

PS：您还可以查看https://pub.dartlang.org/packages/cached_network_image和https://flutter.io/cookbook/images/cached-images/

插件可能会帮您解决问题。

Answer 2

以防万一，这对我有用的修改后的代码：
Stack( fit: StackFit.passthrough, children: <Widget>[ Center( child: CircularProgressIndicator( valueColor: AlwaysStoppedAnimation<Color>(Colors.lightBlue))), Center( child: ClipOval( child: FadeInImage.memoryNetwork( fit: BoxFit.contain, placeholder: kTransparentImage, image: 'https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg', ), ), ), ], ), ));

使FadeInImage.memoryNetwork渲染圆形裁剪的图像

2 个答案: