我用了幾行程式碼就搞定了介面變灰效果

語言: CN / TW / HK

theme: v-green highlight: atom-one-dark


前言

前幾天,各個大廠的 App 首頁都變成了灰色,網上還有不少人問介面變灰怎麼做到的。有人說是後臺換了圖片,這個回答顯然是不懂技術了,對於個性化推薦系統來說,使用的圖片那麼多張,怎麼可能一一替換。還有一種說法是說後臺將圖片處理後再返回給前端的,這個顯然也不太靠譜,每張圖片都需要處理一下,得消耗多少伺服器算力 —— 況且還有文字呢!那麼具體怎麼實現的呢?最近 ChatGPT很火,於是我也問了一下它,得到的答案如下:

image.png

雖然我們的 App 的首頁不是螢幕設定造成的,但是它回答的 RGB 顏色改變確實沒錯。今天我們來看看 在 Flutter 中如何用幾行程式碼就搞定介面由彩色變灰的效果。

ColorFiltered元件

Flutter 提供了一個顏色過濾器元件 ColorFiltered,這個元件可以通過一個顏色過濾器 ColorFilter 對子元件進行顏色轉換。類的建構函式定義如下: dart const ColorFiltered({required this.colorFilter, Widget? child, Key? key}) 其中關鍵的引數 colorFilter 就是 ColorFilter 物件。在《給滅霸點顏色看看》這一篇中有講到過將一張圖片變成灰色,那裡就提到了 ColorFilter 的使用,通過對 RGB 顏色進行矩陣變換,將三種顏色的色值調成相等的,就可以實現彩色變灰色了。這個變換矩陣如下。

image.png

對應的 Flutter 構建 ColorFilter 的程式碼為: dart const greyScale = ColorFilter.matrix(<double>[ 0.2126, 0.7152, 0.0722, 0, 0, 0.2126, 0.7152, 0.0722, 0, 0, 0.2126, 0.7152, 0.0722, 0, 0, 0, 0, 0, 1, 0, ]); 有了這個,我們就可以輕鬆將介面元素變成灰色了。

幾行程式碼搞定介面變灰

我們先構建下面這樣一個列表介面,然後點選右下角的懸浮按鈕將介面中的圖片、文字和按鈕一鍵變灰(實際上是否變灰是通過後臺的開關控制)。

image.png

這裡面 AppBar 和 懸浮按鈕只需要根據開關量控制背景顏色就可以了。列表每一行的元素包含圖片、文字,我們只需要在灰色開關開啟的時候使用 ColorFiltered 處理就可以了。 列表行元素類定義為ImageTextItem,正常的程式碼如下: dart ListView.separated( itemBuilder: (_, index) { return const ImageTextItem(); }, separatorBuilder: (_, index) { return const SizedBox(height: 10.0); }, itemCount: 20, ), 下面是當後臺開啟灰色開關_showGrey時的程式碼,當開啟時,將之前的列表元素使用 ColorFiltered 包裹起來即可,程式碼其實就是多了一個 if...else 判斷,其中的 greyScale 就是我們上面介紹到的變灰色的 ColorFilter 物件。也就幾行程式碼而已。 dart ListView.separated( itemBuilder: (_, index) { if (_showGrey) { return ColorFiltered( colorFilter: greyScale, child: const ImageTextItem(), ); } else { return const ImageTextItem(); } }, separatorBuilder: (_, index) { return const SizedBox(height: 10.0); }, itemCount: 20, ), 下面是實現的效果。

介面變灰.gif

總結

本篇介紹了使用 ColorFiltered元件使介面元素變灰的實現方法,實際上 ColorFiltered 的使用非常簡單,介面變灰也只需要幾行程式碼就能搞定。ColorFiltered還可以用做顏色濾鏡,感興趣的可以自己嘗試一下。本篇原始碼已上傳至:實用元件相關程式碼

我是島上碼農,微信公眾號同名。如有問題可以加本人微信交流,微訊號:island-coder

👍🏻:覺得有收穫請點個贊鼓勵一下!

🌟:收藏文章,方便回看哦!

💬:評論交流,互相進步!