如何在多平台Compose（Android、iOS、桌面、Web）的Text()中渲染HTML文本

方案一：使用成熟第三方库（推荐） #

目前有适配Compose Multiplatform的HTML渲染库，可覆盖Android、iOS、桌面端、Web全平台：

• 依赖配置（在build.gradle.kts中添加）：

commonMain.dependencies {
    implementation("io.github.alexzhirkevich:compose-html-text:1.5.0")
}

• 使用方式：

import io.github.alexzhirkevich.compose.html.HtmlText

HtmlText(
    html = "<p>这是<b>加粗</b>的HTML文本，还有<i>斜体</i>效果</p>",
    modifier = Modifier.padding(16.dp)
)

该库自动处理跨平台渲染适配，支持<b>、<i>、<p>、<a>等常见HTML标签，无需额外平台适配代码。

方案二：平台原生组件封装（高度自定义场景） #

如果需要深度自定义样式或交互，可针对各平台封装原生HTML渲染组件：

• Android：通过AndroidView包裹原生TextView

AndroidView(
    factory = { context ->
        TextView(context).apply {
            text = android.text.Html.fromHtml(
                "<h3>Android原生渲染</h3><p>支持更多HTML标签</p>",
                android.text.Html.FROM_HTML_MODE_COMPACT
            )
        }
    },
    modifier = Modifier.fillMaxWidth()
)

• iOS：通过UIKitView包裹UITextView

UIKitView(
    factory = {
        UITextView().apply {
            isEditable = false
            attributedText = NSAttributedString(
                htmlString = "<h3>iOS原生渲染</h3>",
                documentAttributes = null
            )
        }
    }
)

• 桌面端：通过SwingPanel包裹JEditorPane

SwingPanel(
    factory = {
        JEditorPane().apply {
            contentType = "text/html"
            text = "<h3>Desktop原生渲染</h3><p>基于Swing组件</p>"
            isEditable = false
        }
    },
    modifier = Modifier.fillMaxSize()
)

• Web：直接使用Compose Web的Html组件

import org.jetbrains.compose.web.dom.Html
import org.jetbrains.compose.web.dom.P

Html {
    P {
        domBuilder {
            innerHTML = "<b>Web端直接渲染</b>复杂HTML内容"
        }
    }
}

方案三：轻量HTML自定义解析（极简场景） #

如果仅需处理少量简单标签（如<b>、<i>、<br>），可手动解析HTML生成Compose的AnnotatedString：

1. 添加解析库依赖：

commonMain.dependencies {
    implementation("org.jsoup:jsoup:1.17.2")
}

2. 解析并构建AnnotatedString：

fun parseHtmlToAnnotatedString(html: String): AnnotatedString {
    val document = Jsoup.parse(html)
    val builder = AnnotatedString.Builder()
    document.body().children().forEach { element ->
        when (element.tagName()) {
            "p" -> {
                builder.append(element.text())
                builder.append("\n\n")
            }
            "b" -> {
                builder.pushStyle(SpanStyle(fontWeight = FontWeight.Bold))
                builder.append(element.text())
                builder.pop()
            }
            "i" -> {
                builder.pushStyle(SpanStyle(fontStyle = FontStyle.Italic))
                builder.append(element.text())
                builder.pop()
            }
            // 可扩展支持更多标签
        }
    }
    return builder.toAnnotatedString()
}

3. 在Compose中使用：

Text(
    text = parseHtmlToAnnotatedString("<p>手动解析的<b>加粗</b>文本</p>"),
    modifier = Modifier.padding(16.dp)
)

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