如何在Jetpack Compose中使用Android Emoji2表情选择器？

目前官方确实没有针对Jetpack Compose的Emoji2表情选择器专属文档，我在开发中是通过AndroidView包装原生EmojiPickerView来实现的，具体步骤如下：

1. 添加依赖 #

在Module级别的build.gradle.kts（或build.gradle）中引入emoji2相关依赖：

dependencies {
    implementation("androidx.emoji2:emoji2:1.4.0")
    implementation("androidx.emoji2:emoji2-emojipicker:1.4.0")
}

注：版本可根据最新稳定版调整，要求项目minSdk至少为21。

2. 封装Compose可用的表情选择器组件 #

利用AndroidView将原生EmojiPickerView嵌入Compose，并处理表情选中事件：

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView
import androidx.emoji2.emojipicker.EmojiPickerView

@Composable
fun EmojiPicker(onEmojiSelected: (String) -> Unit) {
    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = { context ->
            EmojiPickerView(context).apply {
                setOnEmojiPickedListener { emojiView ->
                    onEmojiSelected(emojiView.emoji)
                }
            }
        }
    )
}

3. 结合Compose输入组件使用 #

将表情选择器与TextField结合，实现选中表情插入输入框的功能：

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.material3.Text

@Composable
fun ChatInputArea() {
    var inputContent by remember { mutableStateOf("") }

    Column {
        TextField(
            value = inputContent,
            onValueChange = { inputContent = it },
            placeholder = { Text("输入消息...") }
        )
        EmojiPicker { emoji ->
            inputContent += emoji
        }
    }
}

4. 自定义配置（可选） #

你还可以对原生EmojiPickerView做个性化调整，比如修改表情大小、显示行数：

EmojiPickerView(context).apply {
    // 设置表情大小（单位：sp）
    setEmojiSize(24)
    // 设置最大显示行数
    setMaxRows(5)
    setOnEmojiPickedListener { emojiView ->
        onEmojiSelected(emojiView.emoji)
    }
}

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