Flutter 本地圖片導(dǎo)入 2倍圖 3倍圖

1、flutter項(xiàng)目中分別創(chuàng)建assets、images文件夾，在images文件夾下創(chuàng)建 2.0x 和 3.0x文件夾，用來(lái)分別存放2倍圖3倍圖。

創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注網(wǎng)站制作、做網(wǎng)站、網(wǎng)絡(luò)營(yíng)銷、企業(yè)網(wǎng)站建設(shè)，買友情鏈接，一元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

層級(jí)結(jié)構(gòu)如圖下圖:

2、在pubspec.yaml進(jìn)行配置 (注意flutter下 assets:與uses-material-design: 層級(jí)結(jié)構(gòu)要左對(duì)齊否則會(huì)報(bào)錯(cuò) 點(diǎn)擊查看錯(cuò)誤展示 )

3、cd 進(jìn)入 flutter 項(xiàng)目目錄下，終端執(zhí)行 flutter pub get 命令，使配置生效

4、圖片使用

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 ClipRect 使用介紹

ClipRect控件默認(rèn)是通過(guò)限制子widget的繪制區(qū)域來(lái)達(dá)到裁剪的效果的，通過(guò)custom clipper，可以自定義裁剪的大小跟坐標(biāo)

ClipRect的定義如下

ClipRect class默認(rèn)是沒(méi)有任何裁剪效果的，需要通過(guò)clipper參數(shù)告訴ClipRect如何去裁剪，clipper是個(gè)CustomClipper類型，CustomClipper是個(gè)抽象接口類，我們通過(guò)繼承CustomClipper，重寫 getClip 方法可以定義一個(gè)裁剪區(qū)域，通過(guò)重寫 shouldReclip 方法來(lái)告訴ClipRect當(dāng)一個(gè)新的clipper被設(shè)置了是否需要更新裁剪區(qū)域，譬如開(kāi)始設(shè)置的clipper裁剪坐標(biāo)是從(10,10)開(kāi)始的，新設(shè)置的clipper裁剪坐標(biāo)是(20,20)，那么shouldReclip需要返回true來(lái)通知ClipRect更新裁剪區(qū)域。

下面這個(gè)例子從網(wǎng)絡(luò)上加載一張圖片，并且進(jìn)行裁剪，裁剪坐標(biāo)是(10,10) 裁剪的寬高是圖片的寬高減去10

效果如下

Flutter_圖片分辨率適配及批量拓展使用

flutter開(kāi)發(fā)中，圖片的引用是必不可少的，所以為了提高效率和精準(zhǔn)度，我們需要對(duì)不同分辨率的手機(jī)使用相對(duì)應(yīng)的切圖圖片，本章介紹如何進(jìn)行 圖片分辨率適配 和 圖片批量拓展處理 。

flutter中會(huì)首先根據(jù)系統(tǒng)的devicePixelRatio（每一個(gè)邏輯像素包含多少個(gè)原始像素，可以通過(guò)MediaQueryData.devicePixelRatio來(lái)得到）來(lái)找對(duì)應(yīng)倍數(shù)的文件夾下的圖片，如果沒(méi)有對(duì)應(yīng)倍數(shù)，找最接近的。

所以在flutter項(xiàng)目中，我們需要構(gòu)建對(duì)應(yīng)的倍數(shù)像素文件夾

之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，會(huì)自動(dòng)適配該像素下最接近的jay圖片）。

使用flutter-img-sync插件批量化處理，具體操作如下

目前還不能處理gif、webp等格式的圖片，而且如果和上邊介紹的不同像素比適配方案一起使用的話，由于進(jìn)行了精準(zhǔn)定位，所以指定圖片后就不能進(jìn)行像素適配，這是目前還存在的較大問(wèn)題，所以目前兩者方案只能暫時(shí)取一使用。