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(
              'http://598613.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://598613.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://598613.com/img/avatar.png',
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              }
            }
            

            点我查看全部完整代码

            从本地资源中加载Placeholder

            第一步

            配置本地资源图片:

             flutter:
               assets:
            +    - assets/loading.gif
            

            第二步

            加载本地资源图片作为Placeholder

            FadeInImage.assetNetwork(
              placeholder: 'assets/loading.gif',
              image: 'http://598613.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,)
            
            • 本节学习过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助;
            • 欢迎加入课程官方群: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