14.图片控件开发详解

  • 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://www.devio.org/img/avatar.png',
)

demo

 import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

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

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

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

  • pubspec.yaml 文件中声明图片资源的路径;

  • 使用AssetImage访问图片;

我们在《快速上手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插件。

第二步:

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(MyApp());
}

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

从本地资源中加载placeholder

第一步

配置本地资源图片:

 flutter:
   assets:
+    - assets/loading.gif

第二步

加载本地资源图片作为placeholder

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'http://www.devio.org/img/avatar.png',
);

如何配置图片缓存?

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

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  runApp(MyApp());
}

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

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

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,)

Last updated