Image widget

Flutter中用來展示圖片的widget

Image支持如下幾種類型構造函數(shù)：

new Image 用于從ImageProvider獲取圖像；
new Image.asset 使用key從AssetBundle獲得的圖像；
new Image.network 從網(wǎng)絡URL中獲取圖片；
new Image.file 從本地文件中獲取圖片；
new Image.memory 用戶從Uint8List獲取圖像；

在加載項目中的圖片資源時，為了讓Image能夠根據(jù)像素密度自動適配不同分辨率的圖片，請使用AssetImage 指定圖像，并確保在widget樹種的“Image” widget上方存在MaterialApp，WidgetsApp或MediaQuery窗口widget。

Image支持的圖片格式

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

如何加載網(wǎng)絡圖片？

加載網(wǎng)絡圖片，需要使用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'));
  }
}

如何加載靜態(tài)圖片，以及處理不同分辨率的圖片？

要加載項目中靜態(tài)圖片，需要以下兩步：

在 pubspec.yaml 文件中聲明圖片資源路徑；
使用AssetImage 訪問圖片；

  assets:
  - images/1.png

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

還可以通過Image.asset來加載靜態(tài)圖片

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,它能夠從內(nèi)存，本地資源中加載placeholder。

從內(nèi)存中加載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('加載網(wǎng)絡圖片'),
        ),
        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',
            )),
          ],
        ));
  }
}

如何配置圖片緩存