Compose实现黑白化？很简单！

今天是南京大屠杀死难者国家公祭日，在这里为死去的同胞进行默哀。

本篇文章咱们纯谈技术。

写作缘由

由于今天这个特殊的日子，好多应用都以黑白化的形式为死去的同胞进行哀悼，比如某东和某宝：

我记得去年的时候掀起一波黑白化 APP 的高潮，泓洋大神写了一篇探索 Android 原生实现黑白化的文章，然后之后又有 Flutter 版本出现，继而又有一些人实现出来一些别的方案。但今天咱们不考虑原生 Android 是如何实现的，想看的话可以去搜泓洋大神的文章。今天咱们主要考虑使用 Compose 如何实现黑白化。

开始干活

其实之前泓洋大神文章中最后的实现方案就是替换根布局的 FrameLayout，然后设置饱和度为 0 就可以了。Flutter 中的实现更为简单一些，因为 Flutter 官方提供了一个 Widget ：ColorFiltered，可以直接实现应用的黑白化。

接下来重点来了，Compose 中并没有提供类似 Flutter 中的 ColorFiltered，那应该怎么搞呢？

其实使用泓洋大神之前的方案也是没有问题的，但 Compose 应该有更加简单的方式实现，来看下吧：

Surface(color = MaterialTheme.colors.background,) {
    // 正常布局
    NavGraph()
    // 黑白化
    Canvas(modifier = Modifier.fillMaxSize()){
        drawRect(
            color = Color.White,
            blendMode = BlendMode.Saturation
        )
    }
}
复制代码

通过上面代码可以看到之前的一堆代码现在只需要三行，如果去除缩进的话只需要一行。。

原理是一样的，也是通过设置 Saturation，来看下实现效果吧：