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

語言: CN / TW / HK
時間 2022-12-09 06:15:07

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。

👍🏻：覺得有收穫請點個贊鼓勵一下！

🌟：收藏文章，方便回看哦！

💬：評論交流，互相進步！

「」
「」