Jetpack Compose全局黑白模式低API版本兼容方案求助（API26）

方案1：纯Compose分支处理（推荐） #

基于API版本做分支判断，高版本用你原本的BlendMode方案，低版本用ColorMatrix实现滤镜，全程在Compose体系内完成：

代码实现 #

先定义全局灰度修饰符：

import android.os.Build
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.ColorMatrix
import androidx.compose.ui.graphics.ColorMatrixColorFilter
import androidx.compose.ui.graphics.drawscope.drawWithCache
import androidx.compose.ui.graphics.drawscope.withSaveLayer

fun Modifier.globalGrayscale() = drawWithCache {
    onDrawWithContent {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            // API 29+ 用BlendMode实现
            drawContent()
            drawRect(
                color = Color.Black,
                blendMode = BlendMode.Saturation
            )
        } else {
            // API <29 用ColorMatrix降饱和度
            val grayscaleMatrix = ColorMatrix().apply {
                setSaturation(0f)
            }
            val colorFilter = ColorMatrixColorFilter(grayscaleMatrix)
            withSaveLayer(null, colorFilter) {
                drawContent()
            }
        }
    }
}

然后在根布局应用这个修饰符：

setContent {
    YourAppTheme {
        Surface(
            modifier = Modifier.fillMaxSize().globalGrayscale(),
            color = MaterialTheme.colorScheme.background
        ) {
            // 你的应用全部内容
        }
    }
}

方案2：嵌入传统View实现极致兼容 #

如果担心低版本Compose的离屏绘制性能，可复用传统View体系的硬件图层方案，通过Compose的AndroidView嵌入：

代码实现 #

先写自定义View容器：

import android.content.Context
import android.graphics.ColorMatrix
import android.graphics.ColorMatrixColorFilter
import android.graphics.Paint
import android.view.ViewGroup
import android.widget.FrameLayout

class GrayscaleContainer(context: Context) : FrameLayout(context) {
    init {
        val grayscaleMatrix = ColorMatrix().apply { setSaturation(0f) }
        val filter = ColorMatrixColorFilter(grayscaleMatrix)
        // 启用硬件图层提升性能
        setLayerType(LAYER_TYPE_HARDWARE, Paint().apply { colorFilter = filter })
    }
}

再在Compose中嵌入这个容器：

import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.viewinterop.AndroidView

setContent {
    YourAppTheme {
        AndroidView(
            factory = { context -> GrayscaleContainer(context) },
            modifier = Modifier.fillMaxSize()
        ) { container ->
            // 将Compose内容放入容器
            ComposeView(context = container.context).apply {
                setContent {
                    // 你的应用全部内容
                }
            }.also { container.addView(it) }
        }
    }
}

方案对比 #

• 方案1：纯Compose实现，无跨体系开销，性能优异，适合绝大多数场景。
• 方案2：依赖传统View，兼容性拉满，但存在Compose与View的嵌套开销，适合极端兼容需求。

注意事项：

• 方案1中的withSaveLayer会创建离屏缓冲，低端设备若出现性能问题，可切换到方案2的硬件图层方式。
• 确保根布局修饰符覆盖全屏，避免出现未被过滤的区域。

内容的提问来源于stack exchange，提问作者kakaxi-zh