用于文本选择的浮动工具栏 Jetpack Compose

Question

如何为 Jetpack Compose 中的 TextField 自定义所选文本的菜单？我的意思是这样的：

在官方文档或 Internet 上未找到有关如何使用 Jetpack Compose 执行此操作的任何内容。

Answer 1

您可以在 LocalTextToolbar 中提供自定义 TextToolbar。在那里，在 showMenu 方法中，您必须像在旧的 Android 中那样 startActionMode。 CustomTextToolbar:

typealias ActionCallback = () -> Unit

override fun showMenu(
    rect: Rect,

    onCopyRequested: ActionCallback?,
    onPasteRequested: ActionCallback?,
    onCutRequested: ActionCallback?,
    onSelectAllRequested: ActionCallback?

//        Since 1.2.0-alpha05 ActionCallback was removed
//        onCopyRequested: (() -> Unit)?,
//        onPasteRequested: (() -> Unit)?,
//        onCutRequested: (() -> Unit)?,
//        onSelectAllRequested: (() -> Unit)?
) {
    println("showMenu")
    view.startActionMode(TextActionModeCallback())
}

class TextActionModeCallback(
) : ActionMode.Callback {
    override fun onActionItemClicked(mode: ActionMode?, item: MenuItem?): Boolean {
        println("onActionItemClicked $mode $item")
        return true
    }

    override fun onCreateActionMode(mode: ActionMode?, menu: Menu?): Boolean {
        println("onActionItemClicked $mode $menu")
        return false
    }

    override fun onPrepareActionMode(mode: ActionMode?, menu: Menu?): Boolean {
        println("onActionItemClicked $mode $menu")
        return true
    }

    override fun onDestroyActionMode(mode: ActionMode?) {
        println("onActionItemClicked $mode")
    }
}

作为参考如何实现它，查看 compose 源代码：AndroidTextToolbar and TextActionModeCallback

那么你可以这样使用它：

CompositionLocalProvider(
    LocalTextToolbar provides CustomTextToolbar(LocalView.current)
) {
    var text by remember { mutableStateOf("") }
    TextField(value = text, onValueChange = { text = it })
}

要使整个应用程序都能正常工作，您需要在可组合项树的顶部执行此操作，例如 setContent。

p.s。我必须定义 ActionCallback，因为它在 compose 中是内部的。我认为这是一个错误，所以我在 Compose 1.2.0-alpha05.

中创建了 this issue. It was fixed

用于文本选择的浮动工具栏 Jetpack Compose

Floating toolbar for text selection Jetpack Compose

android

kotlin

android-jetpack

android-jetpack-compose