如何在Jetpack Compose中显示Emoji？

Question

使用 Jetpack Compose 无法正确显示表情符号。

代码

    Text(
        text = data.emoji.character,
        textAlign = TextAlign.Center,
        fontSize = 28.sp,
    )

在使用Compose的Text时，我遇到了兼容性问题。
出现了豆腐字和多个表情符号，如这里所解释的那样。

为了解决这个问题，我尝试在AndroidView中使用AppCompatTextView。

代码

    AndroidView(
        factory = { context ->
            AppCompatTextView(context).apply {
                text = data.emoji.character
                textSize = 28F
                textAlignment = View.TEXT_ALIGNMENT_CENTER
            }
        },
    )

它可以显示表情符号而不会有任何兼容性问题，但表情符号会变得模糊。

- Abhimanyu

---

你能添加几个不起作用的表情符号吗？我已经选了第一个，它似乎在你的截图中缺失 ""，但在我的 API 31 模拟器上可以正常渲染。 - Phil Dukhov

@PhilipDukhov，您可以在第一张图片中看到9个豆腐块。您可以将其与第二张图片进行比较，以检查哪些不起作用。 - Abhimanyu

顺便提一下，在API 31的模拟器中可能不存在表情符号兼容性问题。可以尝试一些旧版本24到27。 - Abhimanyu

你应该检查androidx.emoji2库，https://developer.android.com/develop/ui/views/text-and-emoji/emoji2 - yazan sayed

Answer 1

我找到了这个问题，很可能与你的Text问题有关。它已经在Compose 1.4.0中得到修复。

至于AppCompatTextView，它具有默认的半透明文本颜色。设置任何alpha值为1f的颜色即可解决问题：

AppCompatTextView(context).apply {
    setTextColor(Color.Black.toArgb())
    text = " hello"
    textSize = 28F
    textAlignment = View.TEXT_ALIGNMENT_CENTER
}

- Phil Dukhov

Answer 2

您可以在Compose页面中检查所有相关信息的表情符号 https://developer.android.com/jetpack/compose/text/emoji

简而言之，当使用Compose 1.4及以上版本时，现代表情符号支持是开箱即用的；在混合视图时需要考虑一些因素。

- Alejandra