Flutter 加载网络图片的几种方式
Flutter 加载网络图片的几种方式
AnRFDev
发布于 2021-02-01 15:14:04
发布于 2021-02-01 15:14:04
代码可运行
运行总次数：0
代码可运行
对很多移动应用来说，加载网络图片是很常见的基本功能。Android中常用Glide等图片库。Flutter提供了Image组件来展示不同类型的图片。
加载网络图片有几种方式：
Image.networkFadeInImage.memoryNetwork- 使用
cached_network_image中的CachedNetworkImage
使用Image.network加载图片
根据URL加载图片，使用Image.network构造器
Image.network(
'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
)Image组件也支持GIF格式的图片
使用方法如下，和上面的用法一样
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 ImageDemoApp());
class ImageDemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Image Demo',
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Web Image Demo Page'),),
body: new ListView(children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 12.0),
decoration: BoxDecoration(color: Colors.grey),
child: Column(children: <Widget>[
Image.network(
'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
),
Text('Image.network')
],),
),
Container(
margin: EdgeInsets.only(bottom: 12.0),
decoration: BoxDecoration(color: Colors.grey),
child: Column(children: <Widget>[
Image.network(
'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
),
Text('Image.network Animated Gifs')
],),
),
],),
);
}
}
有默认占位图和淡入效果
在图片加载过程中，给用户展示一张默认的图片，能提高用户体验。
使用FadeInImage组件来达到这个功能。FadeInImage能处理内存中，App资源或者网络上的图片。
加载网络图片
import 'package:transparent_image/transparent_image.dart';
FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);示例效果
使用FadeInImage.memoryNetwork
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() => runApp(new FadeInImageDemoApp());
class FadeInImageDemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Image Demo',
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Fade In Image Demo Page'),),
body: Stack(
children: <Widget>[
Center(child: CircularProgressIndicator()),
Center(child: FadeInImage.memoryNetwork(
image: 'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
placeholder: kTransparentImage/* 透明图片 */,)),
],
),
);
}
}
使用应用内的图片来做占位图
使用FadeInImage.assetNetwork
代码
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Fade In Image Demo Page'),),
body: Center(child: FadeInImage.assetNetwork(
image: 'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
placeholder: 'images/birds.gif' /* 指定gif */,)),
);
}
}
使用缓存图片
使用cached_network_image包。参见 https://pub.dartlang.org/packages/cached_network_image 。
CachedNetworkImage(
imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);添加placeholder
cached_network_image的placeholder支持任意组件，比如CircularProgressIndicator
CachedNetworkImage(
placeholder: 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) {
return MaterialApp(
title: 'Cached image load',
home: Scaffold(appBar: AppBar(title: new Text('Cache Image Load'),),
body: Center(child: CachedNetworkImage(
placeholder: CircularProgressIndicator(),
imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true'),),),
);
}
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-06-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
