Flutter 构建完整应用手册-图片 顶

显示来自互联网的图像

显示图像是大多数移动应用程序的基础。 Flutter提供Image小部件以显示不同类型的图像。

为了处理来自URL的图像,请使用Image.network构造函数。

new Image.network(
  'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
)

奖金:GIF动画

关于Image部件的一个惊人的事情:它也支持动画GIF开箱!

new Image.network(
  'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
);

占位符和缓存

默认的Image.network构造函数不能处理更多的高级功能,例如在下载后将图像加载或缓存到设备后淡入图像。 要完成这些任务,请参阅以下配方:

完整例子

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        body: new Image.network(
          'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
        ),
      ),
    );
  }
}

用占位符淡入图像

使用默认images小部件显示图像时,您可能会注意到它们在加载时会弹出到屏幕上。 这可能会让用户产生视觉震撼。

相反,如果你最初可以显示一个占位符,那么它会不会很好,并且图像在加载时会淡入? 我们可以使用与Flutter一起打包的FadeInImage部件来达到这个目的!

FadeInImage可以处理任何类型的图像:内存,本地资源或互联网上的图像。

在这个例子中,我们将使用transparent_image包作为一个简单的透明占位符。 您也可以考虑按照Assets和Images指南使用本地资源来占位符。

new FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

完整的例子

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        body: new Stack(
          children: <Widget>[
            new Center(child: new CircularProgressIndicator()),
            new Center(
              child: new FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image:
                    'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

使用缓存的图像

在某些情况下,在从网络上下载图像时缓存图像可能会很方便,以便它们可以脱机使用。 为此,我们将使用cached_network_image包。

除了缓存之外,cached_image_network软件包在加载时还支持占位符和淡入淡出的图像!

new CachedNetworkImage(
  imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

添加占位符

cached_network_image包允许我们使用任何部件作为占位符! 在这个例子中,我们将在图片加载时显示一个蜘蛛。

new CachedNetworkImage(
  placeholder: new CircularProgressIndicator(),
  imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

完整例子

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Cached Images';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        body: new Center(
          child: new CachedNetworkImage(
            placeholder: new CircularProgressIndicator(),
            imageUrl:
                'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
          ),
        ),
      ),
    );
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SIGAI学习与实践平台

编写基于TensorFlow的应用之构建数据pipeline

本文主要以MNIST数据集为例介绍TFRecords文件如何制作以及加载使用。所讲内容可以在SIGAI 在线编程功能中的sharedata/intro_to_t...

1242
来自专栏逍遥剑客的游戏开发

Nebula3绘制基本图元

1386
来自专栏marsggbo

TensorFlow走过的坑之---数据读取和tf中batch的使用方法

首先介绍数据读取问题,现在TensorFlow官方推荐的数据读取方法是使用tf.data.Dataset,具体的细节不在这里赘述,看官方文档更清楚,这里主要记录...

3511
来自专栏生信小驿站

R语言之可视化②点图

第一步:准备数据,使用的数据包括三列,len长度,supp是分类变量,dose是0.5mg,1mg和2mg三个变量。

1744
来自专栏wym

opencv下imread函数返回值

openCV的imread()函数和imwrite()函数能支持各种静态图像文件格式。

3802
来自专栏python爬虫日记

python下调用pytesseract识别某网站验证码

pytesseract最新版本0.1.6,网址:https://pypi.python.org/pypi/pytesseract

2653
来自专栏用户2442861的专栏

Caffe中LMDB的使用

http://rayz0620.github.io/2015/05/25/lmdb_in_caffe/

2291
来自专栏和蔼的张星的图像处理专栏

总结?

其实算不得总结,lintcode这个在专题不会再更新了,准备秋招的时候大概看过一遍这个,有些还是很有用的,然后剑指offer差不多刷了一遍,过些天闲了我把剑指o...

1044
来自专栏量子位

TensorFlow 1.2正式发布,新增Python 3.6支持

王小新 编译整理 量子位 出品 | 公众号 QbitAI TensorFlow 1.2.0今日正式发布。 主要功能和改进点: 在Windows系统下新增对Pyt...

3474
来自专栏aCloudDeveloper

Mobility Model and Routing Model about the ONE

ONE主要的功能是节点的移动,节点间的相遇情况,路由情况以及消息的处理机制。下面简要介绍下目前ONE自带的六种移动模型和六种路由模型。 Mobility Mod...

1889

扫码关注云+社区

领取腾讯云代金券