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

本文正在参与「金石方案 . 分割6万现金大奖」

前言

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

虽然咱们的 App 的首页不是屏幕设置形成的，可是它答复的 RGB 色彩改变确实没错。今天咱们来看看 在 Flutter 中如何用几行代码就搞定界面由五颜六色变灰的作用。

ColorFiltered组件

Flutter 提供了一个色彩过滤器组件 ColorFiltered，这个组件能够经过一个色彩过滤器 ColorFilter 对子组件进行色彩转化。类的结构函数定义如下：

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

其间要害的参数 colorFilter 便是 ColorFilter 对象。在《给灭霸点色彩看看》这一篇中有讲到过将一张图片变成灰色，那里就提到了 ColorFilter 的运用，经过对 RGB 色彩进行矩阵改换，将三种色彩的色值调成相等的，就能够实现五颜六色变灰色了。这个改换矩阵如下。

对应的 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,
]);

有了这个，咱们就能够轻松将界面元素变成灰色了。

几行代码搞定界面变灰

咱们先构建下面这样一个列表界面，然后点击右下角的悬浮按钮将界面中的图片、文字和按钮一键变灰（实际上是否变灰是经过后台的开关操控）。

这里边 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,
),

下面是实现的作用。

总结

本篇介绍了运用 ColorFiltered组件使界面元素变灰的实现方法，实际上 ColorFiltered 的运用十分简单，界面变灰也只需要几行代码就能搞定。ColorFiltered还能够用做色彩滤镜，感兴趣的能够自己尝试一下。本篇源码已上传至：实用组件相关代码。

我是岛上码农，微信大众号同名。如有问题能够加本人微信沟通，微信号：island-coder。

：觉得有收成请点个赞鼓励一下！

：收藏文章，便利回看哦！

：评论沟通，互相前进！

本文正在参与「金石方案 . 分割6万现金大奖」