Flutter图片控件Image widget

Image widget

Flutter中用来展示图片的widget

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

new Image 用于从ImageProvider获取图像；
new Image.asset 使用key从AssetBundle获得的图像；
new Image.network 从网络URL中获取图片；
new Image.file 从本地文件中获取图片；
new Image.memory 用户从Uint8List获取图像；

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

Image支持的图片格式

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

如何加载网络图片？

加载网络图片，需要使用Image.network构造方法：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Welcome to Flutter',
        home: new Image.network('url'));
  }
}

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

要加载项目中静态图片，需要以下两步：

在 pubspec.yaml 文件中声明图片资源路径；
使用AssetImage 访问图片；

  assets:
  - images/1.png

Image(
     image: AssetImage("images/1.png"),
     width: 50.0,
     height: 50.0,
     )

还可以通过Image.asset来加载静态图片

Image.asset("images/1.png"));

如何加载本地图片？

加载完整路径的本地图片

import 'dart:io';

Image.file(File('本地文件路径')

加载相对路径的本地图片

在pubspec.yaml中添加path_provider插件

import 'package:path_provider/path_provider.dart';

//SD卡的根路径
(await getExternalStorageDirectory()).path;
//临时目录的路径
(await getTemporaryDirectory()).path;
//获取文档目录的路径
(await getApplicationDocumentsDirectory()).path;

如何设置placeholder？

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

从内存中加载placeholder

安装transparent_image插件

import 'package:transparent_image/transparent_image.dart';

使用FadeInImage.memoryNetwork

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('加载网络图片'),
        ),
        body: Stack(
          children: <Widget>[
            Center(
                child: new FadeInImage.memoryNetwork(
              image: 'https://tpc.googlesyndication.com/simgad/5662238301179412298',
              placeholder: kTransparentImage /* 透明图片 */,
            )),
          ],
        ));
  }
}

从本地资源中加载placeholder

使用FadeInImage.assetNetwork

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(''),
        ),
        body: Stack(
          children: <Widget>[
            Center(
                child: new FadeInImage.assetNetwork(
                image:
                  'https://tpc.googlesyndication.com/simgad/5662238301179412298',
                 placeholder: 'images/loading.gif',
            )),
          ],
        ));
  }
}

如何配置图片缓存