Flutter 系列文章：Flutter Image 控件介紹

Image —— 圖像控件

1、使用方式

• 1.支持的圖片格式：

  支持如下圖像格式：JPEG，PNG，GIF，動畫GIF，WebP，動畫WebP，BMP和WBMP

• 2.圖片文件夾

  

• 在項目的根目錄下建立圖片文件夾

• 主資源默認對應於1.0倍的分辨率圖片。看一個例子：

…/my_icon.png //主資源
    …/2.0x/my_icon.png
    …/3.0x/my_icon.png
複製代碼

• 在設備像素比率爲1.8的設備上，.../2.0x/my_icon.png 將被選擇。對於2.7的設備像素比率，.../3.0x/my_icon.png將被選擇。
• 若是未在Image控件上指定渲染圖像的寬度和高度，它將佔用與主資源相同的屏幕空間量（並非相同的物理像素），只是分辨率更高。 也就是說，若是.../my_icon.png是72px乘72px，那麼.../3.0x/my_icon.png應該是216px乘216px; 但若是未指定寬度和高度，它們都將渲染爲72像素×72像素（以邏輯像素爲單位）。
• pubspec.yaml中asset部分中的每一項都應與實際文件相對應，但主資源項除外。當主資源缺乏某個資源時，會按分辨率從低到的順序去選擇 （也就是說1x中沒有的話會在2x中找，2x中尚未的話就在3x中找）。

# To add assets to your application, add an assets section, like this:
  assets:
    - images/2.0x/live_end_yyicon.png
    - images/3.0x/live_end_yyicon.png
    - images/2.0x/treasure_default_card.png
    - images/3.0x/treasure_default_card.png
複製代碼

• 配置好pubspec.yaml 以後須要運行Pacakages get

2、使用方法

var netImageUrl1 = "http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg";
  var netImageUrl2 = "https://flutter.io/images/homepage/header-illustration.png";
  var localImageUrl = "images/2.0x/treasure_default_card.png";
  var fileTest = "/storage/emulated/0/cache/111.png";
複製代碼

1. 加載本地Image目錄下的圖片 --> Image.asset

Image.asset(localImageUrl)
複製代碼

2. 加載網絡圖片 --> Image.network

Image.network(netImageUrl2)
複製代碼

3. 經過使用ImageProvider加載圖片

Image(image: NetworkImage(netImageUrl1),),
    Image(
       image: AssetImage(localImageUrl),
    )
複製代碼

4. 加載外部文件裏面圖片

Image.file(File(fileTest))
複製代碼

3、經常使用屬性

1. alignment 設置圖片在寬高範圍內的對齊方式

alignment: Alignment.bottomLeft
複製代碼

2. centerSlice 設置邊緣裁剪形式

centerSlice: Rect.fromLTWH(20, 20, 100, 100),  
    centerSlice: Rect.fromLTRB(100, 100, 100, 100),
複製代碼

3. color 與 colorBlendMode 結合使用，用於顏色與每一個圖像像素混合

color: Colors.black12,
    colorBlendMode: BlendMode.colorBurn,
複製代碼

4. repeat 繪製圖片未覆蓋的佈局邊界的任何部分 repeat

repeat:ImageRepeat.repeatX,
    repeat:ImageRepeat.repeatY,
    repeat:ImageRepeat.repeatX,
複製代碼

5. 設置圖片寬高

//設置寬高
   width: 300,
   height: 300,
複製代碼

6. 設置圖片怎麼分佈到對應的寬高中

fit 模式	描述
BoxFit.fill	全圖顯示，顯示可能拉伸，充滿
BoxFit.contain	全圖顯示，顯示原比例，不需充滿
BoxFit.cover	顯示可能拉伸，可能裁剪，充滿
BoxFit.fitWidth	顯示可能拉伸，可能裁剪，寬度充滿
BoxFit.fitHeight	顯示可能拉伸，可能裁剪，高度充滿
BoxFit.scaleDown	效果和contain差很少,可是此屬性不容許顯示超過源圖片大小，可小不可大

有圖片的連接

• docs.flutter.io/flutter/pai…

4、一個完整代碼的示例

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

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Demo',
      theme: ThemeData(
        primarySwatch: Colors.green
      ),
      home: MyHomePage(title: 'Image Demo'),
    );

  }
}


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
  }

class _MyHomePageState extends State<MyHomePage>{
  var netImageUrl1 = "http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg";
  var netImageUrl2 = "https://flutter.io/images/homepage/header-illustration.png";
  var localImageUrl = "images/2.0x/treasure_default_card.png";
  var fileTest = "/storage/emulated/0/cache/111.png";


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
            children: <Widget>[
              //重新建的image文件中獲取
              Image.asset(localImageUrl),
              //加載網絡圖片
              Image.network(netImageUrl2),
              // 本地文件圖片
//              Image.file(File(fileTest)),
              //使用ImageProvider加載圖片
              Image(image: NetworkImage(netImageUrl1),),
              Image(
                width: 100,
                height: 100,
                image: AssetImage(localImageUrl),
              ),
              Image(
                //設置imageProvider
                image: AssetImage(localImageUrl),
                //設置圖像在寬高範圍內的對齊方式
                alignment: Alignment.bottomLeft,
                //設置邊緣裁剪形式
//                centerSlice: Rect.fromLTWH(20, 20, 100, 100),
//                centerSlice: Rect.fromLTRB(100, 100, 100, 100),
               //color 與 colorBlendMode 結合使用，用於顏色與每一個圖像像素混合
                color: Colors.greenAccent,
                colorBlendMode: BlendMode.exclusion,
               // ? 圖像過濾器的質量級別
               filterQuality: FilterQuality.high,
                //繪製圖像未覆蓋的佈局邊界的任何部分
//                repeat:ImageRepeat.repeat,
//                repeat:ImageRepeat.repeatY,
//                repeat:ImageRepeat.repeatX,
               //設置寬高
               width: 300,
               height: 300,
               fit: BoxFit.fill,
              )

            ],

        ),
      ),
    );
  }
}



複製代碼