我用了幾行程式碼就搞定了介面變灰效果
theme: v-green highlight: atom-one-dark
前言
前幾天,各個大廠的 App 首頁都變成了灰色,網上還有不少人問介面變灰怎麼做到的。有人說是後臺換了圖片,這個回答顯然是不懂技術了,對於個性化推薦系統來說,使用的圖片那麼多張,怎麼可能一一替換。還有一種說法是說後臺將圖片處理後再返回給前端的,這個顯然也不太靠譜,每張圖片都需要處理一下,得消耗多少伺服器算力 —— 況且還有文字呢!那麼具體怎麼實現的呢?最近 ChatGPT很火,於是我也問了一下它,得到的答案如下:
雖然我們的 App 的首頁不是螢幕設定造成的,但是它回答的 RGB 顏色改變確實沒錯。今天我們來看看 在 Flutter 中如何用幾行程式碼就搞定介面由彩色變灰的效果。
ColorFiltered元件
Flutter 提供了一個顏色過濾器元件 ColorFiltered
,這個元件可以通過一個顏色過濾器 ColorFilter
對子元件進行顏色轉換。類的建構函式定義如下:
dart
const ColorFiltered({required this.colorFilter, Widget? child, Key? key})
其中關鍵的引數 colorFilter
就是 ColorFilter
物件。在《給滅霸點顏色看看》這一篇中有講到過將一張圖片變成灰色,那裡就提到了 ColorFilter
的使用,通過對 RGB 顏色進行矩陣變換,將三種顏色的色值調成相等的,就可以實現彩色變灰色了。這個變換矩陣如下。
對應的 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,
]);
有了這個,我們就可以輕鬆將介面元素變成灰色了。
幾行程式碼搞定介面變灰
我們先構建下面這樣一個列表介面,然後點選右下角的懸浮按鈕將介面中的圖片、文字和按鈕一鍵變灰(實際上是否變灰是通過後臺的開關控制)。
這裡面 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,
),
下面是實現的效果。
總結
本篇介紹了使用 ColorFiltered
元件使介面元素變灰的實現方法,實際上 ColorFiltered
的使用非常簡單,介面變灰也只需要幾行程式碼就能搞定。ColorFiltered
還可以用做顏色濾鏡,感興趣的可以自己嘗試一下。本篇原始碼已上傳至:實用元件相關程式碼。
我是島上碼農,微信公眾號同名。如有問題可以加本人微信交流,微訊號:
island-coder
。👍🏻:覺得有收穫請點個贊鼓勵一下!
🌟:收藏文章,方便回看哦!
💬:評論交流,互相進步!
- 屌炸天!國外同行這樣用Chat GPT提高Flutter開發的效率!
- Flutter 增強版的頁面懸浮按鈕(FloatingActionButton)
- 介紹一個令強迫症討厭的小紅點元件
- 我用了幾行程式碼就搞定了介面變灰效果
- 不就是一個空白頁,有必要那麼講究嗎?
- 花裡胡哨的文字特效,你學會了嗎?
- 這一篇讓你搞定 Flutter 的資料表格
- 用 Flutter 輕鬆做個紅包介面
- 沉浸式彈層越來越多,開發該怎麼做好彈層體驗?
- 列表的載入過程很重要的!
- 這個表單打死我也不填!
- 例項講述開發中的圖片使用者體驗要點
- C 位出道按鈕的自我獨白
- Flutter 繪製3D效果動畫
- 封裝一個有趣的 Loading 元件
- 普通的載入千篇一律,有趣的 loading 萬里挑一
- 由點匯聚成字的動效炫極了
- 給滅霸點顏色看看
- 來看光影流動之美
- Flutter 實現背景圖片毛玻璃效果