我用了几行代码就搞定了界面变灰效果

岛上码农
8,816 阅读3分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

前几天，各个大厂的 App 首页都变成了灰色，网上还有不少人问界面变灰怎么做到的。有人说是后台换了图片，这个回答显然是不懂技术了，对于个性化推荐系统来说，使用的图片那么多张，怎么可能一一替换。还有一种说法是说后台将图片处理后再返回给前端的，这个显然也不太靠谱，每张图片都需要处理一下，得消耗多少服务器算力 —— 况且还有文字呢！那么具体怎么实现的呢？最近 ChatGPT很火，于是我也问了一下它，得到的答案如下：

image.png

虽然我们的 App 的首页不是屏幕设置造成的，但是它回答的 RGB 颜色改变确实没错。今天我们来看看 在 Flutter 中如何用几行代码就搞定界面由彩色变灰的效果。

ColorFiltered组件

Flutter 提供了一个颜色过滤器组件 ColorFiltered，这个组件可以通过一个颜色过滤器 ColorFilter 对子组件进行颜色转换。类的构造函数定义如下：

const ColorFiltered({required this.colorFilter, Widget? child, Key? key})

其中关键的参数 colorFilter 就是 ColorFilter 对象。在《给灭霸点颜色看看》这一篇中有讲到过将一张图片变成灰色，那里就提到了 ColorFilter 的使用，通过对 RGB 颜色进行矩阵变换，将三种颜色的色值调成相等的，就可以实现彩色变灰色了。这个变换矩阵如下。

image.png

对应的 Flutter 构建 ColorFilter 的代码为：

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，正常的代码如下：

ListView.separated(
  itemBuilder: (_, index) {
    return const ImageTextItem();
  },
  separatorBuilder: (_, index) {
    return const SizedBox(height: 10.0);
  },
  itemCount: 20,
),

下面是当后台开启灰色开关_showGrey时的代码，当开启时，将之前的列表元素使用 ColorFiltered 包裹起来即可，代码其实就是多了一个 if...else 判断，其中的 greyScale 就是我们上面介绍到的变灰色的 ColorFilter 对象。也就几行代码而已。

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。

👍🏻：觉得有收获请点个赞鼓励一下！

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

💬：评论交流，互相进步！

本文正在参加「金石计划 . 瓜分6万现金大奖」

avatar
文章
阅读
粉丝