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

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

本文正在参加「金石计划 . 瓜分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万现金大奖」

收藏成功!
已添加到「」, 点击更改