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

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

成都創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注網(wǎng)站建設(shè)、網(wǎng)站設(shè)計，有關(guān)成都定制網(wǎng)頁設(shè)計方案、改版、費用等問題，行業(yè)涉及橡塑保溫等多個領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

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

Image：通過ImageProvider來加載圖片

Image.asset：用來加載本地資源圖片

Image.file：用來加載本地（File文件）圖片

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

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

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

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

還要配置如下

在pubspec.yaml文件

加載一個本地 File 圖片，比如相冊中的圖片，用法如下

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

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

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

flutter中圖片的使用

Image中三個重要的屬性：

alignment：圖片的對齊方式

fit：圖片的展示方式

repeat：圖片平鋪方式

圓角圖片：第一種方式

圓角圖片：第二種方式

【Flutter】圖片、內(nèi)容、滾動空間溢出調(diào)整

空間超出提示

注釋 ：Flutter Incorrect use of ParentDataWidget

問題原因：Expanded、Flexible等組件，在“Container、Padding、Stack”組件中導(dǎo)致的。

解決方案：保持： Expanded、Flexible 只在 Row、Column 等組件內(nèi)，不在其他組件內(nèi)使用。

控件Row有一個水平的布局方向，但是內(nèi)容已經(jīng)超出了可顯示的范圍。

建議我們使用有彈性的控件比如Expanded代替，或者使用可裁剪的控件ClipRect代替，還可以使用具體滾動屬性的控件比如ListView代替

1、類似圖片加載失敗,然后溢出擠壓空間，可以用Container包裹一下

直接使用，如果圖片地址失效，就會溢出

直接使用,圖片鏈接失效引起

2、類似這種超出

A RenderFlex overflowed by 48 pixels on the right.

3、類似這種Column滾動超出!

實現(xiàn)頁面滑動需要用到SingleChildScrollView組件，SingleChildScrollView和Android中ScrollView類似

問題原因：Expanded、Flexible等組件，在“Container、Padding、Stack”組件中導(dǎo)致的。

解決方案：保持：Expanded、Flexible只在Row、Column等組件內(nèi)，不在其他組件內(nèi)使用。

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

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

二. flutter項目中本地圖片加載的原理

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