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

南郭先生

发布于 2018-09-29 15:40:17

1.2K0

发布于 2018-09-29 15:40:17

文章被收录于专栏：Google Dart Google DartGoogle Dart

显示来自互联网的图像

显示图像是大多数移动应用程序的基础。 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',
          ),
        ),
      ),
    );
  }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

.net