Flutter之Image组件

Image

/**
也可以显示gif图片
    const Image({
    Key key,
    @required this.image,
    this.semanticLabel,
    this.excludeFromSemantics = false,

    //width和height，Image显示区域的宽度和高度，跟要显示的图片没有关系，它只是承载图片的容器
    this.width,
    this.height,

    this.color,
    this.colorBlendMode,

    //BoxFit.fill       全图显示，显示可能拉伸，充满
    //BoxFit.contain      全图显示，显示原比例，不需充满
    //BoxFit.cover      显示可能拉伸，可能裁剪，充满
    //BoxFit.fitWidth   显示可能拉伸，可能裁剪，宽度充满
    //BoxFit.fitHeight  显示可能拉伸，可能裁剪，高度充满
    //BoxFit.none
    //BoxFit.scaleDown  效果和contain差不多,但是此属性不允许显示超过源图片大小，可小不可大
    this.fit,

    this.alignment = Alignment.center,//控制图片的摆放位置

    //图片太小时重复方式
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,

    //当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。若值为true，保留，若为false，不保留，直接空白等待下一张图片加载。
    this.gaplessPlayback = false,
    }) 
 */
/**
    Image.network(
    String src,//网络图片地址
    {
    ...
    }
 */

/**
    Image.asset(
    String name   // 资源图片
    ,{
    ...
    })
 */
/**
    Image.file(
    File file   // 本地文件图片
    ,{
    ...
    })
 */
/**
    Image.memory(
    Uint8List bytes   // Uint8List图片
    ,{
    ...
    })
 */

class Widget_Image_State extends State<Widget_Image_Page> {

  var neturl = "https://img4.duitang.com/uploads/item/201210/06/20121006120433_CZXuC.jpeg";
  var gifurl = "https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true";
  var tempUrl = "http://img5.imgtn.bdimg.com/it/u=2230167403,4188800858&fm=26&gp=0.jpg";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Image"),
        ),
        body: ListView(
          children: <Widget>[
            Image(
              image: NetworkImage(tempUrl),
            ),

            Container(
                color: Colors.grey,
                child: Column(
                  children: <Widget>[
                    Container(
                      color: Colors.red,
                      margin: EdgeInsets.only(top: 20.0),
                      child: Image.network(neturl,
                        width: 200.0,
                        height: 200.0,
                        fit: BoxFit.fill,
                      ),
                    ),
                    Container(
                      color: Colors.red,
                      margin: EdgeInsets.only(top: 20.0),
                      child: Image.network(neturl,
                        width: 200.0,
                        height: 200.0,
                        fit: BoxFit.contain,
                      ),
                    ),

                    Container(
                      color: Colors.red,
                      margin: EdgeInsets.only(top: 20.0),
                      child: Image.network(neturl,
                        width: 200.0,
                        height: 200.0,
                        fit: BoxFit.cover,
                      ),
                    ),

                    Container(
                      color: Colors.red,
                      margin: EdgeInsets.only(top: 20.0),
                      child: Image.network(neturl,
                        width: 200.0,
                        height: 200.0,
                        fit: BoxFit.fitWidth,
                      ),
                    ),

                    Container(
                      color: Colors.red,
                      margin: EdgeInsets.only(top: 20.0),
                      child: Image.network(neturl,
                        width: 200.0,
                        height: 200.0,
                        fit: BoxFit.fitHeight,
                      ),
                    ),

                    Container(
                      color: Colors.red,
                      margin: EdgeInsets.only(top: 20.0),
                      child: Image.network(neturl,
                        width: 200.0,
                        height: 200.0,
                        fit: BoxFit.none,
                      ),
                    ),

                    Container(
                      color: Colors.red,
                      margin: EdgeInsets.only(top: 20.0),
                      child: Image.network(neturl,
                        width: 200.0,
                        height: 200.0,
                        fit: BoxFit.scaleDown,
                      ),
                    ),
                    Container(
                      color: Colors.red,
                      margin: EdgeInsets.only(top: 20.0),
                      child: Image.network(gifurl,
                        width: 200.0,
                        height: 200.0,
                      ),
                    ),
                  ],
                )
            ),

            Container(
              color: Colors.greenAccent,
              child: Column(
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    margin: EdgeInsets.only(top: 20.0),
                    child: Image.asset("images/icon_hongbao.png",
                      width: 200.0,
                      height: 200.0,
                      repeat: ImageRepeat.repeat,
                    ),
                  ),
                  Container(
                    color: Colors.blue,
                    margin: EdgeInsets.only(top: 20.0),
                    child: Image.asset("images/icon_hongbao.png",
                      width: 200.0,
                      height: 200.0,
                      repeat: ImageRepeat.repeatX,
                    ),
                  ),
                  Container(
                    color: Colors.blue,
                    margin: EdgeInsets.only(top: 20.0),
                    child: Image.asset("images/icon_hongbao.png",
                      width: 200.0,
                      height: 200.0,
                      repeat: ImageRepeat.repeatY,
                    ),
                  ),
                  Container(
                    color: Colors.blue,
                    margin: EdgeInsets.only(top: 20.0),
                    child: Image.asset("images/icon_hongbao.png",
                      width: 200.0,
                      height: 200.0,
                      repeat: ImageRepeat.noRepeat,
                      alignment: Alignment.bottomRight,
                    ),
                  ),
                ],
              ),
            ),

            Container(
              color: Colors.orange,
              child: Column(
                children: <Widget>[
                  Container(
                    color: Colors.red,
                    margin: EdgeInsets.only(top: 20.0),
                    child: Image.network(tempUrl,
                      width: 200.0,
                      height: 200.0,
                      gaplessPlayback: true,
                    ),
                  ),
                  Container(
                    color: Colors.red,
                    margin: EdgeInsets.only(top: 20.0),
                    child: Image.network(tempUrl,
                      width: 200.0,
                      height: 200.0,
                      gaplessPlayback: false,
                    ),
                  ),
                  RaisedButton(
                    child: Text("点击改变图片地址"),
                    onPressed: (){
                      setState(() {
                        tempUrl =
                        "https://img4.duitang.com/uploads/item/201210/06/20121006120433_CZXuC.jpeg";
                      });
                    },
                  ),
                ],
              ),
            ),
            Image.asset("images/app.png"),
            Image.file(File("")),
//            Image.memory("")
          ],
        ),
      ),
    );
  }
}

FadeInImage

/**
 * 有默认占位图和淡入效果
 *
 * 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,
    })
 */

body: Container(
          child: Center(
            child: FadeInImage.assetNetwork(
                placeholder: "images/app.png",
                image: "https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true"),
          ),
        ),

cached_network_image

/**
 * 从网络获取图片，并保存到缓存
有占位图和加载出错图
 *
 *   CachedNetworkImage({
    Key key,
    @required this.imageUrl,
    this.imageBuilder,
    this.placeholder,//占位图
    this.errorWidget,//加载出错后显示图片
    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,
    this.httpHeaders,
    this.cacheManager,
    this.useOldImageOnUrlChange: false,
    this.color,
    this.colorBlendMode,
    })
 */

child: Center(
              child: CachedNetworkImage(
                imageUrl: "https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true",
                placeholder: (context, url) => Image.asset("images/app.png"),
                errorWidget: (context, url, error) =>
                    Image.asset("images/app.png"),
              )
          ),

圆形和圆角图片

/**
 * 发现不添加Align时，CircleAvatar并没有显示为圆形，
 * 设置child为要显示的url时，并不能显示为圆形，只有设置backgroundColor或者backgroundImage时才显示为了圆形
 * radius和minRadius与maxRadius不能同时使用;
 * ClipOval不在Align里面时也不能显示为圆形，ClipOval中image设置为fit: BoxFit.fill才能显示为圆形；
 * BoxDecoration不在Align里面时也不能显示为圆形，BoxDecoration中image设置为fit: BoxFit.fill才能显示为圆形；
 *
    const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,//背景色，相当于加载中或加载失败的占位图
    this.backgroundImage,//背景图，相当于加载中或加载失败的占位图
    this.foregroundColor,//前景色，
    this.radius,
    this.minRadius,
    this.maxRadius,
    })
 */

body: ListView(
          padding: EdgeInsets.all(20.0),
          children: <Widget>[
            CircleAvatar(
              child: Image.network(
                  "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
//                backgroundColor: Color(0xffff0000),
//              backgroundImage: NetworkImage(
//                  "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
              radius: 40.0,
//              foregroundColor: Color(0x55000000),
            ),
            Align(
              child: CircleAvatar(
                child: Image.network(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
//                backgroundImage: new NetworkImage(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                backgroundColor: Color(0xffff0000),
                radius: 40.0,
              ),
            ),
            //圆形图片
            Align(
              child: CircleAvatar(
//                child: Image.network(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                backgroundImage: NetworkImage(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                backgroundColor: Color(0xffff0000),
                radius: 40.0,
              ),
            ),
            Align(
              child: CircleAvatar(
//                child: Image.network(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                backgroundImage: NetworkImage(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                foregroundColor: Color(0xffff0000),
                radius: 40.0,
              ),
            ),
            Align(
              child: ClipOval(
                child: SizedBox(
                  width: 80.0,
                  height: 80.0,
                  child: Image.network(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                    fit: BoxFit.fill,),
                ),
              ),
            ),
            Align(
                child: Container(
                  width: 80.0,
                  height: 80.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                      ),
                    ),
                  ),
                )
            ),
            //圆角图片
            Align(
              child: Container(
                margin: EdgeInsets.only(top: 10.0),
                width: 80.0,
                height: 80.0,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(5.0),
                  child: Image.network(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
            Align(
                child: Container(
                  margin: EdgeInsets.only(top: 10.0),
                  width: 80.0,
                  height: 100.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(5.0),
                    image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                      ),
                    ),
                  ),
                )
            ),
          ],
        ),

码云地址：https://gitee.com/xgljh/Flutter.git

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容