Flutter小部件之圖片（Image）和圖標(biāo)（Icon）

在Flutter中，我們可以使用Image控件來(lái)顯示圖片，一般來(lái)講我們的圖片資源都來(lái)源于網(wǎng)絡(luò)或者本地圖片。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括大田網(wǎng)站建設(shè)、大田網(wǎng)站制作、大田網(wǎng)頁(yè)制作以及大田網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，大田網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到大田省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

Flutter中的Image也是類(lèi)似。

我們先來(lái)看看Image的構(gòu)造方法

下面我們來(lái)看看其常用的屬性

可以看到，其常用屬性跟前端中的css很像。

下面我們來(lái)簡(jiǎn)單用一用Image控件

首先是必填參數(shù)image，它接收一個(gè)ImageProvider類(lèi)型的值。ImageProvider是一個(gè)抽象類(lèi)，他下面有下圖這些實(shí)現(xiàn)類(lèi)，由下面這些實(shí)現(xiàn)類(lèi)可以看出，image是可以從資源，內(nèi)存，網(wǎng)絡(luò)，和文件中獲取圖片。

我們先來(lái)試試加載網(wǎng)絡(luò)圖片

首先看看NetworkImage構(gòu)造方法，很簡(jiǎn)單，傳個(gè)url就可以了

如下：

嗯，就是這么簡(jiǎn)單。其他3種情況使用也是類(lèi)似的，自行看源碼即可。

實(shí)際上，F(xiàn)lutter給我們提供了擴(kuò)展方法，使用起來(lái)更加簡(jiǎn)單，通常我們直接使用提供的擴(kuò)展方法即可

如下

可以看到，他們的構(gòu)造方法基本類(lèi)似。

所以我們也可以這樣寫(xiě)，跟上面的效果是一致的。

大致分為一下幾步

1.創(chuàng)建一個(gè)文件夾，用于存放圖片，如圖，我創(chuàng)建了一個(gè)imgs的文件夾，放了一張圖片

2.在pubspec.yaml中聲明資源，注意聲明的時(shí)候路徑和前面的-是有間隔的，不然的話會(huì)報(bào)#/properties/flutter/properties/assets: type: wanted [array] got -imgs/code.png

類(lèi)似的錯(cuò)誤，聲明完成后點(diǎn)擊右上方的packages get

或

下面我們?cè)賮?lái)看看其他屬性。

width，height

寬高沒(méi)什么好說(shuō)的，就是設(shè)置寬度和高度

配合color使用，用于設(shè)置顏色的混合模式。BlendMode是一個(gè)枚舉，他有很多值

詳細(xì)解析還是看官方文檔吧，值太多了，我們隨便用用

用于設(shè)置圖片的填充方式，當(dāng)圖片本身小于設(shè)置的寬高或者比父控件的寬高小時(shí)，我們可以設(shè)置該屬性控制圖片的顯示。

其值的類(lèi)型是BoxFit。是個(gè)枚舉

具體含義還是直接看文檔即可

設(shè)置圖片的對(duì)齊方式，接收一個(gè)Alignment類(lèi)型的值，值如下，很好理解

為了方便看效果我們?cè)谕膺吿琢藗€(gè)Container,簡(jiǎn)單的把它理解為一個(gè)容器布局就可以了，類(lèi)似于html中的div或android中的Layout，我們給Container設(shè)置了寬高和背景顏色。

bottomLeft效果如下，其他的自行嘗試

相對(duì)于Image，ICON可以像web一樣使用字體圖標(biāo)，并且可以使用矢量圖，無(wú)需擔(dān)心失真的問(wèn)題，并且體積相對(duì)較小。

我們先來(lái)看看其構(gòu)造方法

很簡(jiǎn)單，我們直接來(lái)用一用

默認(rèn)情況下，pubspec.yaml中uses-material-design的值為true.我們默認(rèn)就可以使用Material Design字體圖標(biāo)

新貴 Flutter （6）中 Material Design

大家都知道 google 推出 Material Design 讓沒(méi)有多少設(shè)計(jì)經(jīng)驗(yàn)的開(kāi)發(fā)者也可以設(shè)計(jì)出精美界面。而且對(duì) material design google 也投入了很多，輕松找到許多 iso 或 android 端的組件。當(dāng)然 Flutter 官方也提供許多支持 Material Design 的組件。

這些組件我們輕松地在 Flutter 官網(wǎng)提供 Material Component Widgets 找到。

創(chuàng)建課件數(shù)據(jù)類(lèi)，用于持有數(shù)據(jù)，Tut 包含課件名稱(chēng)、說(shuō)明和課時(shí)以及圖片。

這里模擬數(shù)據(jù)集合，這一切都是為了演示做基礎(chǔ)，為一些假數(shù)據(jù)。這里簡(jiǎn)單用 express 啟動(dòng)一個(gè)服務(wù)提供圖片，供 flutter 對(duì)圖片進(jìn)行預(yù)覽。

創(chuàng)建 ListView 的視圖列表，調(diào)用其靜態(tài)方法 builder 來(lái)構(gòu)建 ListView，在 builder 方法傳入 itemCount 也就是條目數(shù)，和 itemExtent 是列表?xiàng)l目的高度，itemBuilder 接受一個(gè)函數(shù)作為參數(shù)，函數(shù)會(huì)得到 context 和 index（位置信息）的參數(shù)來(lái)構(gòu)建列表內(nèi)容，返回 Widget 就是列表?xiàng)l目的內(nèi)容。

第三節(jié) Flutter Image圖片組件的使用

Image組件的構(gòu)造方法

在 Android 中，我們都知道，圖片的顯示方式有很多，資源圖片、網(wǎng)絡(luò)圖片、文件圖片等等，在 Flutter 中也有多種方式，用來(lái)加載不同形式的圖片：

Image：通過(guò)ImageProvider來(lái)加載圖片

Image.asset：用來(lái)加載本地資源圖片

Image.file：用來(lái)加載本地（File文件）圖片

Image.network：用來(lái)加載網(wǎng)絡(luò)圖片

Image.memory：用來(lái)加載Uint8List資源（byte數(shù)組）圖片

Image 的一個(gè)參數(shù)是 ImageProvider，基本上所有形式的圖片加載都是依賴(lài)它，這個(gè)類(lèi)里面就是實(shí)現(xiàn)圖片加載的原理。用法如下：

加載一個(gè)本地資源圖片，和 Android 一樣，有多種分辨率的圖片可供選擇，但是沿襲的是 iOS 的圖片風(fēng)格，分為 1x，2x，3x，具體做法是在項(xiàng)目的根目錄下創(chuàng)建兩個(gè)文件夾，如下圖所示：

還要配置如下

在pubspec.yaml文件

加載一個(gè)本地 File 圖片，比如相冊(cè)中的圖片，用法如下

加載一個(gè)網(wǎng)絡(luò)圖片，用法如下：

有的時(shí)候我們需要像Android那樣使用一個(gè)占位圖或者圖片加載出錯(cuò)時(shí)顯示某張?zhí)囟ǖ膱D片，這時(shí)候需要用到 FadeInImage 這個(gè)組件：

用來(lái)將一個(gè) byte 數(shù)組加載成圖片，用法如下：

Flutter（6）：基礎(chǔ)組件之Image

Image是一個(gè)用于展示圖片的組件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image.asset - 用于從資源目錄的顯示圖片,需要在 pubspec.yaml 文件中聲明。

Image.network - 用于從網(wǎng)絡(luò)上顯示圖片。

Image.file - 用于從文件里顯示圖片。

Image.memory - 用于從內(nèi)存里（Uint8List）顯示圖片。

alignment → AlignmentGeometry - 圖像邊界內(nèi)對(duì)齊圖像。

centerSlice → Rect - 九片圖像的中心切片。

color → Color - 該顏色與每個(gè)圖像像素混合colorBlendMode。

colorBlendMode → BlendMode - 用于 color 與此圖像結(jié)合使用。

fit → BoxFit - 圖像在布局中分配的空間。

gaplessPlayback → bool - 當(dāng)圖像提供者發(fā)生變化時(shí)，是繼續(xù)顯示舊圖像（true）還是暫時(shí)不顯示（false）。

image → ImageProvider - 要顯示的圖像。

matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection。

repeat → ImageRepeat - 未充分容器時(shí)，是否重復(fù)圖片。

height → double - 圖像的高度。

width → double - 圖像的寬度。

加載資源圖片需要將圖片資源放入工程中，例如：新建images文件夾，將圖片放在該文件夾下，圖片適配則是使用ios的方式1X，2X，3X：

然后在pubspec.yaml中配置assets：

加載資源/網(wǎng)絡(luò)/本地文件圖片/內(nèi)存圖片：

占位圖加載圖片：

圓形圖片：1.裁剪實(shí)現(xiàn) 2.CircleAvatar實(shí)現(xiàn) 3.Container邊框?qū)崿F(xiàn)

圓角圖片：1.裁剪實(shí)現(xiàn) 2.Container邊框?qū)崿F(xiàn)

BoxFit.contain 全圖居中顯示但不充滿，顯示原比例

BoxFit.cover 圖片可能拉伸，也可能裁剪，但是充滿容器

BoxFit.fill 全圖顯示且填充滿，圖片可能會(huì)拉伸

BoxFit.fitHeight 圖片可能拉伸，可能裁剪，高度充滿

BoxFit.fitWidth 圖片可能拉伸，可能裁剪，寬度充滿

BoxFit.scaleDown 效果和contain差不多， 但是只能縮小圖片，不能放大圖片

下一節(jié)學(xué)習(xí)基礎(chǔ)組件之Text

詳解flutter中本地資源圖片的使用

一. flutter中我們想加載本地圖片，需要兩步：

二. flutter項(xiàng)目中本地圖片加載的原理

在加載圖片時(shí)，系統(tǒng)自動(dòng)會(huì)根據(jù)屏幕分辨率優(yōu)先選擇到符合自己分配率的文件夾（2.0x或者3.0x或者4.0x）下去取相對(duì)應(yīng)的圖片，如果當(dāng)前文件夾下沒(méi)有，則會(huì)到低一倍的文件夾下去，如果還沒(méi)有，則繼續(xù)向更低一倍去取。(比如：iOS 5.5英寸及以上屏幕會(huì)優(yōu)先選擇去3.0x下去取圖片，如果3.0x不存在或者3.0x文件夾下沒(méi)有，則去2.0x下??；如果2.0x不存在或者2.0x下沒(méi)有，則去1.0x下?。?.0x下再?zèng)]有，則在images文件下取)。

flutter 圖片放大，圖片詳情，圖片輪播

先上圖（樣式自己調(diào)整）

1.新建小部件

根據(jù)實(shí)際情況修改以下部分內(nèi)容；

2.使用(index 為當(dāng)前點(diǎn)擊圖片的下標(biāo)，)