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

                  Posted by 本的秘密博客 on April 11, 2019

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

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

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

                  • 本文学习过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助;
                  • 欢迎加入课程官方群: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。

                  如何加载网络图片?

                  要加载网络图片,我们需要使用Image.network构造方法:

                  Image.network(
                    'https://www.devio.org/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(
                          'https://www.devio.org/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: 'https://www.devio.org/img/avatar.png',
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    }
                  }
                  

                  点我查看全部完整代码

                  从本地资源中加载Placeholder

                  第一步

                  配置本地资源图片:

                   flutter:
                     assets:
                  +    - assets/loading.gif
                  

                  第二步

                  加载本地资源图片作为Placeholder

                  FadeInImage.assetNetwork(
                    placeholder: 'assets/loading.gif',
                    image: 'https://www.devio.org/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,)
                  
                  • 本节学习过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助;
                  • 欢迎加入课程官方群:795410523 和讲师以及其他师兄弟们一起学习交流;

                  参考资料


                  16kou fushipifaw 1sysb 155217 293182 618632 229187 266793 782276 177152 598613 536683 658753 218325 896853 596113 675327 021sh6 278857 0551tt 0752cy 022ct ahcnjt 52lpw