Flutter基础控件--Image2(FadeInImage、CircleAvatar)

  在上一篇中，我们介绍了Image的用法，Flutter中除了Image还有几个常用的用来展示图片的控件：FadeInImage、CircleAvatar、RawImage.
  FadeInImage
  FadeInImage是一个带占位符且淡入的Image，构造函数如下：

FadeInImage.assetNetwork({
    Key key,
    @required String placeholder,
    @required String image,
    AssetBundle bundle,
    double placeholderScale,
    double imageScale = 1.0,
    this.excludeFromSemantics = false,
    this.imageSemanticLabel,
    this.placeholderSemanticLabel,
    this.fadeOutDuration = const Duration(milliseconds: 300),//控制placeholder的淡出动画时间
    this.fadeOutCurve = Curves.easeOut,//控制placeholder的淡出动画方式
    this.fadeInDuration = const Duration(milliseconds: 700),//控制目标图像的淡入动画时间
    this.fadeInCurve = Curves.easeIn,//控制目标图像的淡入动画方式
    this.width,
    this.height,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.matchTextDirection = false,
    })

从构造函数看，其用法比较简单，常用属性和Image没多大区别，特殊点在构造函数中已经标出说明了。

new FadeInImage.assetNetwork(
              placeholder: 'image/test_icon.jpg',
              image:
                  'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg',
              width: 60,
              height: 60,
            ),

  CircleAvatar
  CircleAvatar是一个圆形Image，常用来显示用户Icon，比Android中实现圆形ImageView简单多了。构造方法如下：

  const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,
    this.backgroundImage,
    this.foregroundColor,
    this.radius,
    this.minRadius,
    this.maxRadius,
  }) : assert(radius == null || (minRadius == null && maxRadius == null)),
       super(key: key);

CircleAvatar用法也很简单，设置backgroundImage和radius就会显示出一个圆形Image效果。

 new Container(
              width: 80,
              height: 80,
              child: new CircleAvatar(
                backgroundImage: NetworkImage(
                    'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
                radius: 20,
              ),
            ),
            new CircleAvatar(backgroundImage:AssetImage('image/test_icon.jpg'),
              radius: 20,)

由于CircleAvatar不能设置大小，所以可以在外面包一层Container来设置CircleAvatar大小。

  RawImage
  RawImage很少使用，它是通过 paintImage 绘制出来的Image，一般推荐使用Image，Image底层其实就是封装了RawImage。