Flutter Widget：實(shí)例講解圖片組件Image、Icon、ImageIcon

前言

  • Flutter 作為Google出品的一個(gè)新興的跨平臺(tái)移動(dòng)客戶端UI開發(fā)框架，正在被越來(lái)越多的開發(fā)者和組織使用，包括阿里的咸魚、騰訊的微信等。

    示意圖

  • 今天，我主要講解Flutter中圖片組件方面的Widget，包括Image、Icon、ImageIcon，希望你們會(huì)喜歡。

示意圖

1. Image

1.1 作用

顯示圖片，主要支持的加載方式：本地圖片、資源圖片 & 網(wǎng)絡(luò)圖片。

1.2 常用屬性

const Image({
    Key key,
    @required this.image,// ImageProvider，必填參數(shù)，接收一個(gè)ImageProvider 類型的值
    this.semanticLabel, // String，圖片的描述
    this.excludeFromSemantics = false, // bool，是否從語(yǔ)義上排除該圖片，默認(rèn)值為false
    this.width, // double，圖片的寬度
    this.height, // double，圖片的高度
    this.color, // Color，圖片的前景色，一般不設(shè)置或設(shè)置透明色，會(huì)覆蓋掉圖片，一般會(huì)和colorBlendMode結(jié)合使用
    this.colorBlendMode, // BlendMode，一般和color結(jié)合使用，設(shè)置color的混合模式
    this.fit, // BoxFit，設(shè)置圖片的顯示模式
    this.alignment = Alignment.center, // AlignmentGeometry，用于設(shè)置圖片的對(duì)齊方式，默認(rèn)值：Alignment.center
    this.repeat = ImageRepeat.noRepeat, // ImageRepeat，圖片的重復(fù)方式，當(dāng)圖片沒(méi)有完全覆蓋掉容器時(shí)使用。默認(rèn)值：ImageRepeat.noRepeat
    ...
  })

下面，將詳細(xì)講解Image的屬性。

1.3 屬性image

  • 接收一個(gè)ImageProvider類型的值。ImageProvider是一個(gè)抽象類
  • 實(shí)現(xiàn)類主要包括：AssetImage、MemoryImage、NetworkImage、FileImage，分別表示可從資源、內(nèi)存、網(wǎng)絡(luò) & 文件中獲取圖片
// 加載網(wǎng)絡(luò)圖片
Image.network(String src, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    Map<String, String> headers,
  })

// 加載本地文件
  Image.file(File file, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

// 從項(xiàng)目資源中加載
Image.asset(String name, {
    Key key,
    AssetBundle bundle,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    String package,
    this.filterQuality = FilterQuality.low,
  })

// 從內(nèi)存中加載
 Image.memory(Uint8List bytes, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

為了方便使用，在Image的構(gòu)造方法里也加入了快速?gòu)母鞣N不同途徑獲得圖片的方式，Image的構(gòu)造方法包括：

Image()  // 通用方法，使用ImageProvider實(shí)現(xiàn)，如下方法本質(zhì)上也是使用的這個(gè)方法
Image.asset // 加載資源圖片
Image.file  // 加載本地圖片文件
Image.network  // 加載網(wǎng)絡(luò)圖片
Image.memory   // 加載Uint8List資源圖片

// 獲得資源圖片
new Image.asset('imgs/logo.jpeg')

// 獲得網(wǎng)絡(luò)圖片
new Image.network(
  'https://flutter.io/images/homepage/header-illustration.png')

// 獲得本地文件圖片
new Image.file(new File("/Users/gs/Downloads/1.jpeg"))

// 獲得Uint8List圖片
new Image.memory(bytes)

// 獲得使用ImageProvider加載圖片
new Image(image: new NetworkImage(
  "https://flutter.io/images/homepage/screenshot-2.png"),)

此處特別說(shuō)明加載本地的資源圖片

步驟1：創(chuàng)建一個(gè)文件夾存放圖片

此處創(chuàng)建的是文件夾名 = assetImage，放了一個(gè)名為photo.jpg的圖片

步驟2：在pubspec.yaml中聲明資源

注：聲明時(shí)路徑和前面的- 存在間隔

步驟3：加載時(shí)填寫正確資源路徑

// 獲得資源圖片
new Image.asset('assetImage/photo.jpg')
  • 實(shí)際測(cè)試代碼

main.dart

import 'package:flutter/material.dart';// Material UI組件庫(kù)

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

// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來(lái)定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
    );
  }
}

// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //設(shè)置appbar
      appBar: new AppBar(
        title: new Text('Flutter Demo'),
      ),
      //主體
      body: new Image.asset('assetImage/photo.jpg')
    );
  }

}
  • 測(cè)試效果

1.4 屬性width & height、fit

  • 屬性說(shuō)明
// 代表Image顯示區(qū)域的寬度和高度設(shè)置
this.width, // double，圖片的寬度
this.height, // double，圖片的高度

this.fit, // BoxFit，設(shè)置圖片的顯示模式，具體設(shè)置如下圖

// 此處將兩個(gè)屬性一起說(shuō)明是因?yàn)椋?// 圖片的容器Image Widget的寬高 & 圖片本身的大小不一樣（需區(qū)分開來(lái)）
// 所以結(jié)合圖片的顯示模式講解
  • 使用
    main.dart 
void main() => runApp(MyApp());

// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來(lái)定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
    );
  }
}

// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //設(shè)置appbar
        appBar: new AppBar(
          title: new Text('Flutter Demo'),
        ),
        //主體
        body: new Image.asset(
          'assetImage/photo.jpg',
          width: 200.0,
          height: 100.0,
          fit: BoxFit.fill,
        ));
  }
}

1.5 屬性color、colorBlendMode

  • 屬性說(shuō)明
this.color
// Color，圖片的前景色，一般不設(shè)置或設(shè)置透明色，會(huì)覆蓋掉圖片，一般會(huì)和colorBlendMode結(jié)合使用

this.colorBlendMode
// BlendMode，一般和color結(jié)合使用，設(shè)置color的混合模式，具體設(shè)置屬性如下：
  • 使用
    main.dart 
import 'package:flutter/material.dart';// Material UI組件庫(kù)

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

// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來(lái)定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
    );
  }
}

// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //設(shè)置appbar
      appBar: new AppBar(
        title: new Text('Flutter Demo'),
      ),
      //主體
        body: new Image.asset(
          'assetImage/photo.jpg',
          width: 200.0,
          height: 100.0,
          fit: BoxFit.fill,
          color: Colors.red,
          colorBlendMode: BlendMode.colorDodge,
        ));
  }
}

  • 測(cè)試效果


1.6 屬性alignment

  • 屬性說(shuō)明
this.alignment = Alignment.center
// AlignmentGeometry，用于設(shè)置圖片的對(duì)齊方式，默認(rèn)值：Alignment.center，可設(shè)置的屬性如下：
  • 具體使用
    為了方便展示，此處加入一個(gè)布局容器Container方便展示。

main.dart

import 'package:flutter/material.dart';// Material UI組件庫(kù)

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

// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來(lái)定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
    );
  }
}

// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //設(shè)置appbar
      appBar: new AppBar(
        title: new Text('Flutter Demo'),
      ),
        // 主體
        body: Container(
          width: 500,
          height: 1000,
          color: Colors.red,
          child: Image.asset(
            'assetImage/photo.jpg',
            width: 50.0,
            height: 50.0,
            alignment: Alignment.bottomCenter,
            fit: BoxFit.contain,
          ),
        ));
  }
}
  • 測(cè)試效果

1.7 屬性Repeat

  • 屬性說(shuō)明
this.repeat = ImageRepeat.noRepeat
// ImageRepeat，圖片的重復(fù)方式，當(dāng)圖片沒(méi)有完全覆蓋掉容器時(shí)使用。默認(rèn)值：ImageRepeat.noRepeat

// 枚舉類型
repeat // 1. 在x軸和y軸重復(fù)
repeatX // 2. 在x軸重復(fù)
repeatY // 3. 在y軸重復(fù)
noRepeat // 4. 不重復(fù)
  • 具體使用
import 'package:flutter/material.dart';// Material UI組件庫(kù)

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

// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來(lái)定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
    );
  }
}

// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //設(shè)置appbar
      appBar: new AppBar(
        title: new Text('Flutter Demo'),
      ),
        //主體
        body: Container(
          width: 500,
          height: 1000,
          color: Colors.red,
          child: Image.asset(
            'assetImage/photo.jpg',
            width: 50.0,
            height: 50.0,
            alignment: Alignment.bottomCenter,
            fit: BoxFit.contain,
            repeat: ImageRepeat.noRepeat,
          ),
        ));
  }
}
  • 測(cè)試效果

至此，關(guān)于Image Widget講解完畢。

2. Icon

2.1 作用

顯示圖標(biāo)圖片

2.2 優(yōu)勢(shì)（相對(duì)于Image）

  • 體積?。嚎梢詼p小安裝包大小。
  • 矢量：矢量圖標(biāo)，放大不會(huì)影響其清晰度。
  • 可應(yīng)用文本樣式：可以像文本一樣改變字體圖標(biāo)的顏色、大小對(duì)齊等 & 可通過(guò)TextSpan和文本混用

2.3 構(gòu)造方法

 const Icon(this.icon, {
    Key key, // 設(shè)置使用的圖標(biāo)
    this.size, // 圖標(biāo)大小
    this.color, // 顏色
    this.textDirection, // 渲染圖標(biāo)的文本方向
  })

2.4 具體使用

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

// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來(lái)定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
    );
  }
}

// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //設(shè)置appbar
      appBar: new AppBar(
        title: new Text('Flutter Demo'),
      ),
        //主體
        body: Icon(
          Icons.camera,
          size: 50,
          color: Colors.red,
          textDirection: TextDirection.ltr,
        ));
  }
}

2.5 測(cè)試效果

2.6 特別說(shuō)明

Flutter默認(rèn)包含了一套Material Design的字體圖標(biāo)，在pubspec.yaml文件中的配置如下


3. ImageIcon

3.1 作用

自定義圖形圖標(biāo)，來(lái)自于圖片繪制。圖標(biāo)不可交互式。

3.2 構(gòu)造函數(shù)

  const ImageIcon(this.image, {
    Key key, 
    this.size, // 圖標(biāo)大小
    this.color, // 顏色
  })
  • 區(qū)別于Icon，ImageIcon是采用自定義ImageProvider來(lái)定義圖標(biāo)
  • 自定義ImageProvider分別是上面講解Image的：AssetImage、MemoryImage、NetworkImage、FileImage，即分別表示可從資源、內(nèi)存、網(wǎng)絡(luò) & 文件中獲取圖片
// 加載網(wǎng)絡(luò)圖片
Image.network(String src, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    Map<String, String> headers,
  })

// 加載本地文件
  Image.file(File file, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

// 從項(xiàng)目資源中加載
Image.asset(String name, {
    Key key,
    AssetBundle bundle,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    String package,
    this.filterQuality = FilterQuality.low,
  })

// 從內(nèi)存中加載
 Image.memory(Uint8List bytes, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

// 為了方便使用，在Image的構(gòu)造方法里也加入了快速?gòu)母鞣N不同途徑獲得圖片的方式，Image的構(gòu)造方法包括：
Image()  // 通用方法，使用ImageProvider實(shí)現(xiàn)，如下方法本質(zhì)上也是使用的這個(gè)方法
Image.asset // 加載資源圖片
Image.file  // 加載本地圖片文件
Image.network  // 加載網(wǎng)絡(luò)圖片
Image.memory   // 加載Uint8List資源圖片

3.3 具體使用

import 'package:flutter/material.dart';// Material UI組件庫(kù)

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

// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來(lái)定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
    );
  }
}

// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //設(shè)置appbar
        appBar: new AppBar(
          title: new Text('Flutter Demo'),
        ),
        //主體
        body: ImageIcon(AssetImage(
            'assetImage/plane.png'), // 注：此處的圖片格式必須是.png哦??！
          size: 300,
          color: Colors.red,)
    );
  }
}

3.4 測(cè)試效果圖

至此，關(guān)于圖片方面的Widget講解完畢。

4. 總結(jié)

  • 本文主要講解了Flutter中圖片組件方面的Widget，包括Image、Icon、ImageIcon
  • 接下來(lái)推出的文章，我將繼續(xù)講解Flutter的相關(guān)知識(shí)，包括更多的Widget用法、實(shí)例應(yīng)用等，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客

請(qǐng)點(diǎn)贊！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫作的最大動(dòng)力！

相關(guān)文章閱讀
Android開發(fā)：最全面、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面、最易懂的Webview詳解
Android開發(fā)：JSON簡(jiǎn)介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析

歡迎關(guān)注Carson_Ho的簡(jiǎn)書！

不定期分享關(guān)于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 每日一言：我們的手中，握著的可能是失敗的種子，也可能是成功的無(wú)限潛能，答案需要我們自己選擇:隨波逐浪將一事無(wú)成，全...
    乘香墨影閱讀 1,196評(píng)論 0贊 9
  • 親朋好友： 小學(xué)同學(xué)群 初中同學(xué)群 高中同學(xué)群 大學(xué)同學(xué)群 廣州親戚群 高州親戚群 佛山親戚群 好友群 興趣愛(ài)好：...
    佛山許劍鋒閱讀 920評(píng)論 0贊 1
  • 和你分開的季節(jié)也是夏天，太陽(yáng)曬得人眼花繚亂，分不清現(xiàn)實(shí)的我以為這次你也只是說(shuō)著鬧著玩的。 過(guò)了好幾天沒(méi)收到你的信息...
    梅子_40af閱讀 1,425評(píng)論 0贊 4
  • MapMap是一組鍵值對(duì)的結(jié)構(gòu)，具有極快的查找速度。 舉個(gè)例子，假設(shè)要根據(jù)同學(xué)的名字查找對(duì)應(yīng)的成績(jī)，如果用Arra...
    半眼魚閱讀 229評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容