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

最后编辑于：2019.06.27 09:57:24

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,222评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,455评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,720评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,568评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,696评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,879评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,028评论 3赞 409
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,773评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,220评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,550评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,697评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,360评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,002评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,782评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,010评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,433评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,587评论 2赞 350

Flutter之Image组件

Image

FadeInImage

cached_network_image

圆形和圆角图片

推荐阅读更多精彩内容