Jetpack Compose中AndroidView切换暗黑模式不识别主题问题及解决

问题场景 #

使用Compose的AndroidView集成MPChart或原生TextView时，切换到暗黑模式后，这些组件仍保持亮色模式样式，无法跟随系统主题同步切换。

问题代码示例 #

AndroidView(factory = {
    TextView(it).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )

        text = "How are you"
        textSize = 28f
    }
})

解决方法 #

AndroidView中的原生View不会自动感知Compose的MaterialTheme主题变化，需要手动从MaterialTheme中获取适配当前主题的配色，再赋值给原生组件对应的样式属性。

实现步骤 #

1. 在AndroidView初始化前，从MaterialTheme.colorScheme中获取对应主题的颜色变量
2. 将颜色变量应用到原生View的样式属性上（比如TextView的文字颜色、MPChart的网格/文字配色等）

示例代码 #

// 从MaterialTheme中获取适配当前主题的颜色
val onSurfaceColor = MaterialTheme.colorScheme.onSurface

AndroidView(factory = {
    TextView(it).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )

        text = "How are you"
        textSize = 28f
        // 应用主题适配的文字颜色
        setTextColor(onSurfaceColor.toArgb())
    }
})

针对MPChart，只需用同样方式从MaterialTheme获取对应颜色，再设置给图表的文字、网格线、背景等属性，即可实现暗黑模式下的样式适配。

内容的提问来源于stack exchange，提问作者salman