如何在Jetpack Compose可编辑TextField的选择菜单中添加自定义选项？

Jetpack Compose 1.3.0及以上版本提供了TextToolbar相关API，可以通过重写该组件扩展文本选中的上下文菜单，具体实现步骤如下：

步骤1：定义自定义操作项 #

首先声明你需要新增的自定义操作的结构，示例如下：

// 自定义操作项结构
data class CustomTextAction(
    // 菜单显示的文字
    val title: String,
    // 点击操作的回调，参数为当前选中的文本内容
    val onClick: (selectedText: String) -> Unit
)

步骤2：自定义TextToolbar替换默认菜单 #

继承系统默认的BasicTextToolbar，在原有默认菜单项的基础上插入自定义项：

class CustomTextToolbar(
    private val context: Context,
    // 传入自定义的操作项列表
    private val customActions: List<CustomTextAction>
) : BasicTextToolbar(context) {

    override fun getActions(
        textSelection: TextSelection,
        onPaste: (() -> Unit)?,
        onCopy: (() -> Unit)?,
        onCut: (() -> Unit)?,
        onSelectAll: (() -> Unit)?,
        onWebSearch: (() -> Unit)?
    ): List<TextToolbarAction> {
        // 获取系统默认的复制、粘贴、剪切、全选等操作项
        val defaultActions = super.getActions(textSelection, onPaste, onCopy, onCut, onSelectAll, onWebSearch)
        // 把自定义操作转换为TextToolbar识别的格式
        val customToolbarActions = customActions.map { action ->
            TextToolbarAction(
                label = action.title,
                onClick = {
                    action.onClick(textSelection.content.text)
                    hide() // 点击后自动关闭菜单
                }
            )
        }
        // 可调整顺序，这里是把自定义项放在默认项后面
        return defaultActions + customToolbarActions
    }
}

步骤3：给TextField绑定自定义菜单 #

在页面中初始化自定义的TextToolbar，传给TextField的对应参数即可生效：

@Composable
fun CustomTextFieldPage() {
    val context = LocalContext.current
    // 初始化你需要添加的自定义操作
    val customActions = remember {
        listOf(
            CustomTextAction("分享选中内容") { selectedText ->
                // 示例：实现分享逻辑
                val sendIntent = Intent().apply {
                    action = Intent.ACTION_SEND
                    putExtra(Intent.EXTRA_TEXT, selectedText)
                    type = "text/plain"
                }
                context.startActivity(Intent.createChooser(sendIntent, "分享到"))
            },
            CustomTextAction("翻译选中内容") { selectedText ->
                // 示例：实现翻译逻辑
                Toast.makeText(context, "待翻译内容：$selectedText", Toast.LENGTH_SHORT).show()
            }
        )
    }
    // 初始化自定义TextToolbar
    val customTextToolbar = remember { CustomTextToolbar(context, customActions) }
    var inputValue by remember { mutableStateOf("") }

    TextField(
        value = inputValue,
        onValueChange = { inputValue = it },
        label = { Text("测试输入框") },
        // 绑定自定义菜单
        textToolbar = customTextToolbar
    )
}

注意事项 #

• 如果你使用的Compose版本低于1.3.0，可以升级版本，或通过ContextMenuData+ContextMenuItem的方式实现，核心逻辑一致，都是替换默认的上下文菜单构造逻辑。
• 如果不需要保留默认的复制、粘贴等操作，直接在getActions方法中返回自定义操作项列表即可，无需拼接系统默认项。
• 可调整自定义项的插入位置，比如要放在最前面，改为返回customToolbarActions + defaultActions即可。

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