Jetpack Compose中AndroidView内HTML文本随主题切换颜色的方法

问题描述 #

请问如何让通过AndroidView()格式化的HTML字符串文本颜色，随应用主题在Light（浅色）和Dark（深色）之间程序化切换而同步变化？感谢您的解答！

用户提供的代码 #

Compose 函数

@SuppressLint("ResourceType")
@Composable
private fun CourseCardDescription(modifier: Modifier, htmlString: String) { // HTML文本格式

    val cxt = LocalContext.current
    val toggleColor = if (colors.isLight) {
        ResourcesCompat.getColor(cxt.resources, R.color.black, cxt.theme)
    }   else {
        ResourcesCompat.getColor(cxt.resources, R.color.white, cxt.theme)
    }
    val color by remember { mutableStateOf(toggleColor) }

    Column(
        modifier = modifier
                .padding(horizontal = LEFT_RIGHT_PADDING)
    ) {

   // .....
        AndroidView(
            modifier = modifier,
            factory = { context ->
                        TextView(context).apply {
                            layoutParams = ViewGroup.LayoutParams(
                                ViewGroup.LayoutParams.MATCH_PARENT,
                                ViewGroup.LayoutParams.MATCH_PARENT
                            )
                            setTextColor(color)
                            letterSpacing = 0.075f
                            setTextAppearance(R.style.CourseTextAppearance)

                        }
                      },
            update = {it.text = HtmlCompat.fromHtml(htmlString,HtmlCompat.FROM_HTML_MODE_COMPACT)}
        )
    }
}

Styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CourseTextAppearance">
        <item name="android:fontFamily">@font/kulim_park_regular</item>
        <item name="android:textSize">15sp</item>
<!--        <item name="android:textColor">@color/purple_700</item>-->
<!--        <item name="android:textStyle">bold</item>-->
    </style>
</resources>

解决方案 #

核心问题分析 #

原代码存在两个关键问题：

1. color变量用remember { mutableStateOf(toggleColor) }初始化，但主题切换时toggleColor的更新无法同步到color状态中。
2. setTextColor仅在factory块执行一次（仅View创建时触发），主题切换时不会重新执行，导致颜色无法更新。

修改步骤及代码 #

1. 使用主题动态颜色，简化判断逻辑

直接使用Compose提供的主题内置颜色（如LocalContentColor.current或MaterialTheme.colors.onBackground），这些颜色会自动跟随浅色/深色主题切换，无需手动判断。

2. 将颜色更新移至update块

update块会在Compose重组时触发（包括主题切换场景），因此在这里更新TextView的颜色，确保主题变化时颜色同步生效。

修改后的Compose函数：

@SuppressLint("ResourceType")
@Composable
private fun CourseCardDescription(modifier: Modifier, htmlString: String) {
    // 获取跟随主题变化的文本颜色
    val textColor = LocalContentColor.current
    val context = LocalContext.current

    Column(
        modifier = modifier.padding(horizontal = LEFT_RIGHT_PADDING)
    ) {
        AndroidView(
            modifier = modifier,
            factory = { ctx ->
                TextView(ctx).apply {
                    layoutParams = ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT
                    )
                    letterSpacing = 0.075f
                    setTextAppearance(R.style.CourseTextAppearance)
                }
            },
            update = { textView ->
                // 主题切换时更新文本颜色
                textView.setTextColor(textColor.toArgb())
                // 更新HTML内容
                textView.text = HtmlCompat.fromHtml(htmlString, HtmlCompat.FROM_HTML_MODE_COMPACT)
            }
        )
    }
}

3. 优化样式文件（可选）

在Styles.xml中直接引用系统主题颜色，让TextView默认具备主题适配能力：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CourseTextAppearance">
        <item name="android:fontFamily">@font/kulim_park_regular</item>
        <item name="android:textSize">15sp</item>
        <!-- 引用系统主题的主文本颜色，自动适配深浅主题 -->
        <item name="android:textColor">?android:attr/textColorPrimary</item>
    </style>
</resources>

补充说明 #

如果HTML字符串中存在硬编码的颜色值（如<font color="#000">），则需要额外处理：通过HtmlCompat.fromHtml的Html.TagHandler或SpannableString遍历替换颜色，确保所有文本都跟随主题变化。若没有硬编码颜色，上述方案即可满足需求。

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