带你快速掌握Flutter图片开发核心技能

Posted by manbetx客户端应用下载 on April 11, 2019

带你快速掌握Flutter图片开发核心技能

为大家倾力打造的课程《Flutter从入门到进阶-实战携程网App》上线了,解锁Flutter开发新姿势,一网打尽Flutter核心技术 点我Get!!!

在这篇文章中,将带着大家一起学习在Flutter中图片开发以及应用场景中的必备技能以及一些经验技巧

  • 本文学习过程中遇到无法解决的问题可以在课程问答区进行manbetx客户端应用-提问,课程老师会对你进行辅导和帮助;
  • 欢迎加入课程官方群:795410523 和讲师以及其他师兄弟们一起学习交流;

目录

  • 什么是Image widget
  • 如何加载网络图片?
  • 如何加载静态图片?
  • 如何加载本地图片?
  • 如何设置Placeholder?
  • 如何配置图片缓存?
  • 如何加载Icon

什么是Image widget?

Flutter中一个用来展示图片的widget。

Image支持如下几种类型的构造函数:

在加载项目中的图片资源时,为了让Image能够根据像素密度自动适配不同分辨率的图片,请使用AssetImage指定图像,并确保在widget树中的“Image” widget上方存在MaterialAppWidgetsAppMediaQuery窗口widget。

Image支持的图片格式

Image 支持以下类型的图片:JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP。

如何加载网络图片?

要加载网络图片,我们需要使用Iboke.nrnlibrary.com构造方法:

Image.network( 'http://boke.nrnlibrary.com/img/avatar.png', ) 

demo:

... class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter bottomNavigationBar', theme: new ThemeData.fallback(), home: Image.network( 'http://boke.nrnlibrary.com/img/avatar.png', ), ); } } 

点我查看全部完整代码

如何加载静态图片,以及处理不同分辨率的图片?

要加载项目中的静态图片,需要一些两步:

我们在《快速上手Flutter开发》《项目结构、资源、依赖和本地化》一节中详细讲解过如何归档图片资源以及处理不同分辨率的图片,在这里就不重复了。

pubspec.yaml声明图片路径:

assets: - images/my_icon.png 

使用AssetImage访问图片图片:

Image( height: 26, width: 26, image: AssetImage(my_icon.png), ), 

除了我们使用Image的构造方法手动指定AssetImage之外,还可通过Image.asset来加载静态图片:

Image.asset(my_icon.png, width: 26, height: 26, ) 

两者是等效的。

/sdcard/Download/Stack.png

如何加载本地图片?

加载完整路径的本地图片

import 'dart:io'; Image.file(File('/sdcard/Download/Stack.png')), 

加载相对路径的本地图片

第一步:

pubspec.yaml中添加path_provider插件;

第二步:导入头文件

import 'dart:io'; import 'package:path_provider/path_provider.dart'; //Image.file(File('/sdcard/Download/Stack.png')), FutureBuilder(future: _getLocalFile("Download/Stack.png"), builder: (BuildContext context, AsyncSnapshot<File> snapshot) { return snapshot.data != null ? Image.file(snapshot.data) : Container(); }) ) //获取SDCard的路径: Future<File> _getLocalFile(String filename) async { String dir = (await getExternalStorageDirectory()).path; File f = new File('$dir/$filename'); return f; } 

点我查看全部完整代码

如何设置Placeholder?

为了设置Placeholder我们需要借助FadeInImage,它能够从内存,本地资源中加载placeholder。

从内存中加载Placeholder

第一步:

安装transparent_image插件。

第二步:

... class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Fade in images'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), body: Stack( children: <Widget>[ Center(child: CircularProgressIndicator()), Center( child: FadeInImage.memoryNetwork( placeholder: kTransparentImage, image: 'http://boke.nrnlibrary.com/img/avatar.png', ), ), ], ), ), ); } } 

点我查看全部完整代码

从本地资源中加载Placeholder

第一步

配置本地资源图片:

 flutter: assets: + - assets/loading.gif 

第二步

加载本地资源图片作为Placeholder

FadeInImage.assetNetwork( placeholder: 'assets/loading.gif', image: 'http://boke.nrnlibrary.com/img/avatar.png', ); 

点我查看全部完整代码

如何配置图片缓存?

在Flutter中我们可以借助cached_network_image插件,来从网络上加载图片,并且将其缓存到本地,以供下次使用。

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Cached Images'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: CachedNetworkImage( placeholder: (context, url) => new CircularProgressIndicator(), imageUrl: 'https://picsum.photos/250?image=9', ), ), ), ); } } 

关于创建图片控件开发详解的更多实战技巧与最佳实践可学习《基于Flutter1.x开发携程网App》

如何加载Icon?

在Flutter中我们可以借助Icon来加载icon:

const Icon(this.icon//IconDate, { Key key, this.size,//大小 this.color,//颜色 this.semanticLabel,//标志位 this.textDirection,//绘制方向,一般使用不到 }) 

点我查看全部完整代码

从Icon的构造方法可以很清楚的看出Icon构造方法需要一个默认的类型为IconData类型的参数,我们可以构造一个自己的IconData,也可以使用Flutter提供的material_fonts

使用Icons

通过如下代码我们可以使用Flutter内置的material_fonts

... class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar( title: new Text("Icons"), ), body: new Center( child: new Icon(Icons.android,size: 100.0), ), ); } } 

点我查看全部完整代码

使用自定义的Icon

使用自定义的我们需要构造一个:

const IconData( this.codePoint,//必填参数,fonticon对应的16进制Unicode { this.fontFamily,//字体库系列 this.fontPackage,//字体在那个包中,不填仅在自己程序包中查找 this.matchTextDirection: false,图标是否按照图标绘制方向显示 }); 

首先我我们需要向使用字体一样,在pubspec.yaml中配置我们的icon:

fonts: - family: devio fonts: - asset: fonts/devio.ttf 

接下来就可以使用了:

child: new Icon(new IconData(0xf5566,fontFamily: "devio"),size: 100.0,color: Colors.blueAccent,) 

参考资料