如何更改 Jetpack Compose 中的 AppBar 菜单？

Question

我想知道如何更改 Jetpack Compose 中的 Appbar 菜单。

在Fragment 的世界中，要实现这一点就是这样做：

class SampleFragment : Fragment() {
    override fun onCreate(context: Context) {
        super.onCreate(context)
        setHasOptionsMenu(true)
    }

    // Set the R.menu.sampleMenu in the AppBar
    override fun onCreateOptionsMenu(menu: Menu) {
        ...
        menuInflater.inflate(R.menu.sampleMenu, menu)
    }

    // To handle clicks on the menu
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // Check id of menu item and process as follow
    }
...
}

我想知道如何在 Compose 中做同样的事情。我想有这样的：

// Have a top level state which could be set 
var menu by remember { mutableStateOf(emptyList<Menu>()) }

....
TopAppBar {
    ....
    menu.forEach {
        TextButton(...)
    }
}

....

//and then on my content ill set the `menu` to a value
onCommit {
    menu = listOf(Menu1, Menu2, Menu3, ...)
}

我想知道这是否是正确的方法，或者是否有更好的方法。

我很想得到一些意见和建议，非常感谢。

Answer 1

有一个名为 DropdownMenu 的组件，您可以在此处阅读：https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#dropdownmenu

请注意，您不应将其包装在按钮中，有一个名为 toggle 的参数将是打开菜单的按钮。

还有一个 DropdownMenuItem，其样式由 Material Design 规范定义： https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#dropdownmenuitem

关于导航，我认为完全是另一回事，如果您对此有任何疑问，请发布其他问题的详细信息。

这是一个小例子：

var menuExpanded by remember { mutableStateOf(false) }
DropdownMenu(
    toggle = {
        TextButton({ menuExpanded = !menuExpanded }) {
            Text("Open menu", color = Color.White)
        }
    },
    expanded = menuExpanded,
    onDismissRequest = {
        menuExpanded = false
    },
) {
    DropdownMenuItem(onClick = {}) {
        Text("First item")
    }
    DropdownMenuItem(onClick = {}) {
        Text("Second item")
    }
    DropdownMenuItem (onClick = {}) {
        Text("Third item")
    }
}

编辑：由于您评论说您的问题在于跨屏幕共享应用栏，重要的是要指出这将按照您实现它的方式进行，例如，在下面的代码中，我会有不同的应用栏对于不同的屏幕，问题就会得到解决，当然，这是一个非常简单的示例，对于多个屏幕来说是不可行的。但是那里有关于在 Compose 中处理导航的内容，如果您对此有任何疑问，您可以提出其他问题来确定您所需要的范围。

val currentScreen by viewModel.currentScreen.observeAsState(Screen.HOME)
when (currentScreen) {
    Screen.HOME -> Scaffold(/* topBar = ... */) {
        // Home body
    }
    Screen.PROFILE -> Scaffold(/* topBar = ... */) {
        // Profile body
    }
    Screen.CHAT -> Scaffold(/* topBar = ... */) {
        // Chat body
    }
}