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

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

10年積累的做網(wǎng)站、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有大通免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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初學(xué) —— 常用控件使用

在編寫(xiě)幾個(gè) Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場(chǎng)景都有對(duì)應(yīng)的處理方案；而 Dart 語(yǔ)言也與 Java 、 Kotlin 類(lèi)似，所以對(duì) Android 開(kāi)發(fā)者來(lái)說(shuō)門(mén)檻非常低；特意記錄一下常用的控件及其使用：

StatelessWidget 不需要額外的創(chuàng)建 State

StatefulWidget 創(chuàng)建 State 類(lèi)，并可以在其中保存一些狀態(tài)

only 可以單獨(dú)設(shè)置每個(gè)方向的內(nèi)邊距

類(lèi)似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個(gè)對(duì)齊方式， crossAxisAlignment 表示橫向的對(duì)齊方式

與 Column 相反，主軸是橫向，對(duì)齊方式類(lèi)似， crossAxisAlignment 表示豎向的對(duì)齊方式

類(lèi)似 SizedBox ，一個(gè)容器，但是主要功能是有一個(gè) decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影

棧，先入后出，類(lèi)似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定顯示在某一個(gè)位置

配合多 child 使用，會(huì)填充剩余的空間

Image 功能強(qiáng)大，使用不同的方法可以加載不同來(lái)源的圖片

看到這些方法，突然覺(jué)得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無(wú)論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。

名字和 Android 的一模一樣，但是用法卻比 Android 的簡(jiǎn)單很多：

主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個(gè) widget ，當(dāng)然了，每個(gè) ListView 都有其對(duì)應(yīng)的 item ，在里面的方法中編寫(xiě) widget 即可

與 ListView 類(lèi)似，但是需要有一個(gè) delegate 類(lèi)，作用是設(shè)置有多少列，每一列之間的間距是多少

GridView 沒(méi)有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來(lái)處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

Flutter_定義控件StatefulWidgets和StatelessWidget

Stateful（有狀態(tài)） 和 stateless（無(wú)狀態(tài)） widgets

stateless widget 沒(méi)有內(nèi)部狀態(tài). Icon、 IconButton, 和Text 都是無(wú)狀態(tài)widget, 他們都是 StatelessWidget的子類(lèi)。

stateful widget 是動(dòng)態(tài)的. 用戶可以和其交互 (例如輸入一個(gè)表單、 或者移動(dòng)一個(gè)slider滑塊),或者可以隨時(shí)間改變 (也許是數(shù)據(jù)改變導(dǎo)致的UI更新). Checkbox, Radio, Slider, InkWell, Form, and TextField 都是 stateful widgets, 他們都是 StatefulWidget的子類(lèi)。

StatefulWidget類(lèi)

具有可變狀態(tài)的小部件。

狀態(tài)是（1）在構(gòu)建窗口小部件時(shí)可以同步讀取的信息，以及（2）在窗口小部件的生命周期內(nèi)可能會(huì)更改的信息。這是小工具實(shí)施者的責(zé)任，以確保國(guó)家的及時(shí)通知當(dāng)這種狀態(tài)的改變，使用State.setState。

有狀態(tài)窗口小部件是一個(gè)窗口小部件，它通過(guò)構(gòu)建一個(gè)更具體地描述用戶界面的其他窗口小部件來(lái)描述用戶界面的一部分。構(gòu)建過(guò)程以遞歸方式繼續(xù)，直到用戶界面的描述完全具體（例如，完全由RenderObjectWidget組成，其描述具體的RenderObject）。

當(dāng)您描述的用戶界面部分可以動(dòng)態(tài)更改時(shí)（例如由于具有內(nèi)部時(shí)鐘驅(qū)動(dòng)狀態(tài)或依賴于某些系統(tǒng)狀態(tài)），狀態(tài)窗口小部件非常有用。對(duì)于僅依賴于對(duì)象本身中的配置信息以及窗口小部件膨脹的 BuildContext的組合，請(qǐng)考慮使用 StatelessWidget。

StatefulWidget實(shí)例本身是不可變的，并且將它們的可變狀態(tài)存儲(chǔ)在由createState方法創(chuàng)建的單獨(dú)State對(duì)象中 ，或者存儲(chǔ)在State訂閱的對(duì)象中，例如Stream或ChangeNotifier對(duì)象，其引用存儲(chǔ)在StatefulWidget的最終字段中本身。

框架在膨脹StatefulWidget時(shí) 調(diào)用createState，這意味著如果該窗口小部件已插入到多個(gè)位置的樹(shù)中，則多個(gè)State對(duì)象可能與同一StatefulWidget關(guān)聯(lián)。同樣，如果StatefulWidget從樹(shù)中移除，后來(lái)在樹(shù)再次插入時(shí)，框架將調(diào)用createState再創(chuàng)建一個(gè)新的國(guó)家目標(biāo)，簡(jiǎn)化的生命周期狀態(tài)的對(duì)象。

如果StatefulWidget的創(chuàng)建者使用GlobalKey作為其 鍵，則StatefulWidget在從樹(shù)中的一個(gè)位置移動(dòng)到另一個(gè)位置時(shí)保持相同的State對(duì)象。由于具有GlobalKey的窗口小部件可以在樹(shù)中的至多一個(gè)位置使用，因此使用GlobalKey的窗口小部件最多只有一個(gè)關(guān)聯(lián)元素。當(dāng)通過(guò)將與該窗口小部件關(guān)聯(lián)的（唯一）子樹(shù)從舊位置移植到新位置（而不是在該位置重新創(chuàng)建子樹(shù)）時(shí)，框架利用此屬性將全局鍵從樹(shù)中的一個(gè)位置移動(dòng)到另一個(gè)位置時(shí)利用此屬性。新的位置）。與StatefulWidget關(guān)聯(lián)的State對(duì)象與子樹(shù)的其余部分一起被移植，這意味著State對(duì)象在新位置被重用（而不是被重新創(chuàng)建）。但是，為了有資格進(jìn)行嫁接，必須將窗口小部件插入到從舊位置移除它的同一動(dòng)畫(huà)幀中的新位置。

StatefulWidget有兩個(gè)主要類(lèi)別。

首先是其中一個(gè)分配資源State.initState并在他們的處置State.dispose，但不依賴于InheritedWidget S或致電State.setState。這些小部件通常在應(yīng)用程序或頁(yè)面的根目錄中使用，并通過(guò)ChangeNotifier， Stream或其他此類(lèi)對(duì)象與子小部件進(jìn)行通信。遵循這種模式的有狀態(tài)小部件相對(duì)便宜（就CPU和GPU周期而言），因?yàn)樗鼈儤?gòu)建一次然后永不更新。因此，它們可能有一些復(fù)雜和深刻的構(gòu)建方法。

第二類(lèi)是使用State.setState或依賴于 InheritedWidget的小部件。這些通常會(huì)在應(yīng)用程序的生命周期內(nèi)重建多次，因此最小化重建此類(lèi)窗口小部件的影響非常重要。（他們也可以使用State.initState或 State.didChangeDependencies并分配資源，但重要的是他們重建。）

可以使用幾種技術(shù)來(lái)最小化重建有狀態(tài)窗口小部件的影響：

StatelessWidget類(lèi)

一個(gè)不需要可變狀態(tài)的小部件。

無(wú)狀態(tài)窗口小部件是一個(gè)窗口小部件，它通過(guò)構(gòu)建一個(gè)更具體地描述用戶界面的其他窗口小部件來(lái)描述用戶界面的一部分。構(gòu)建過(guò)程以遞歸方式繼續(xù)，直到用戶界面的描述完全具體（例如，完全由RenderObjectWidget組成，其描述具體的RenderObject）。

當(dāng)您描述的用戶界面部分不依賴于對(duì)象本身的配置信息以及窗口小部件膨脹的BuildContext時(shí)，無(wú)狀態(tài)窗口小部件非常有用。對(duì)于可以動(dòng)態(tài)更改的組合，例如由于具有內(nèi)部時(shí)鐘驅(qū)動(dòng)狀態(tài)或依賴于某些系統(tǒng)狀態(tài)，請(qǐng)考慮使用StatefulWidget。

無(wú)狀態(tài)窗口小部件的構(gòu)建方法通常僅在以下三種情況下調(diào)用：第一次將窗口小部件插入樹(shù)中，窗口小部件的父窗口更改其配置時(shí)，以及何時(shí)依賴于更改的InheritedWidget。

如果窗口小部件的父級(jí)將定期更改窗口小部件的配置，或者它依賴于經(jīng)常更改的繼承窗口小部件，則優(yōu)化構(gòu)建方法的性能以保持流暢的呈現(xiàn)性能非常重要。

可以使用幾種技術(shù)來(lái)最小化重建無(wú)狀態(tài)窗口小部件的影響：

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

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

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)