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

sometime-rock發表於2019-03-19
Flutter控制元件

Image —— 影像控制元件

一、使用方式

  • 1.支援的圖片格式：

    支援以下影像格式：JPEG，PNG，GIF，動畫GIF，WebP，動畫WebP，BMP和WBMP

  • 2.圖片資料夾

    image

  • 在專案的根目錄下建立圖片資料夾

  • 主資源預設對應於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

二、使用方法

  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)
複製程式碼
  1. 載入網路圖片 --> Image.network
    Image.network(netImageUrl2)
複製程式碼
  1. 通過使用ImageProvider載入圖片
    Image(image: NetworkImage(netImageUrl1),),
    Image(
       image: AssetImage(localImageUrl),
    )
複製程式碼
  1. 載入外部檔案裡面圖片
    Image.file(File(fileTest))
複製程式碼

三、常用屬性

  1. alignment 設定圖片在寬高範圍內的對齊方式
    alignment: Alignment.bottomLeft
複製程式碼
  1. centerSlice 設定邊緣裁剪形式
    centerSlice: Rect.fromLTWH(20, 20, 100, 100),  
    centerSlice: Rect.fromLTRB(100, 100, 100, 100),
複製程式碼
  1. color 與 colorBlendMode 結合使用，用於顏色與每個影像畫素混合
    color: Colors.black12,
    colorBlendMode: BlendMode.colorBurn,
複製程式碼
  1. repeat 繪製圖片未覆蓋的佈局邊界的任何部分 repeat
    repeat:ImageRepeat.repeatX,
    repeat:ImageRepeat.repeatY,
    repeat:ImageRepeat.repeatX,
複製程式碼
  1. 設定圖片寬高
   //設定寬高
   width: 300,
   height: 300,
複製程式碼
  1. 設定圖片怎麼分佈到對應的寬高中
fit 模式 描述
BoxFit.fill 全圖顯示，顯示可能拉伸，充滿
BoxFit.contain 全圖顯示，顯示原比例，不需充滿
BoxFit.cover 顯示可能拉伸，可能裁剪，充滿
BoxFit.fitWidth 顯示可能拉伸，可能裁剪，寬度充滿
BoxFit.fitHeight 顯示可能拉伸，可能裁剪，高度充滿
BoxFit.scaleDown 效果和contain差不多,但是此屬性不允許顯示超過源圖片大小，可小不可大

有圖片的連結

四、一個完整程式碼的示例

image

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

            ],

        ),
      ),
    );
  }
}



複製程式碼

相關文章