[英]Jetpack Compose : Hoisitng click state from DropDownItems to DropDownMenu
我想要做的是在单击下拉项后关闭 TopBar 下拉菜单。 如果我将下拉项直接放在下拉菜单中,则可以轻松完成。 但在这里我试图将它分离为一个可组合的可读性。
这是我的TopAppBar
@Composable
fun TopBar(
scope: CoroutineScope,
scaffoldState: ScaffoldState,
event: (AdminLaunchEvents) -> Unit,
navController: NavHostController
) {
val openDialog = remember { mutableStateOf(false) }
TopAppBar(
title = {
Text(text = "Main App Admin Area", fontSize = 18.sp)
},
actions = {
OverflowMenu() {
SettingsDropDownItem(onClick = {})
ModeDropDownItem(onClick = {})
LogoutDropDownItem(onClick = {
openDialog.value = true
})
}
},
backgroundColor = MaterialTheme.colors.primary,
contentColor = Color.White
)
if (openDialog.value) {
LogOutComponent(openDialog = openDialog, event = event,navController = navController)
}
}
这是OverFlowMenu
可组合的,其中包含下拉菜单
@Composable
fun OverflowMenu(content: @Composable () -> Unit) {
var showMenu by remember { mutableStateOf(false) }
IconButton(onClick = {
showMenu = !showMenu
}) {
Icon(
imageVector = Icons.Outlined.MoreVert,
contentDescription = "More",
)
}
DropdownMenu(
expanded = showMenu,
onDismissRequest = { showMenu = false }
) {
content()
}
}
现在下面给出的是DropDownItem
。
@Composable
fun SettingsDropDownItem(onClick: () -> Unit) {
DropdownMenuItem(onClick = onClick) {
Icon(
Icons.Filled.Settings,
contentDescription = "Settings",
modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Text("Settings")
}
}
我想要做的是,当我单击SettingsDroDownItem
,我需要在OverFlowMenu
可组合中捕获单击事件以使showMenu
false
,以便隐藏DropdownMenu
。 我可以在TopAppBar
获得点击事件,但如何在DropDownMenu
上获得它。
怎么做?
第一个选项是将showMenu
状态移出OverflowMenu
,因为这不是唯一取决于值的可组合项。 像这样: OverFlowMenu
:
@Composable fun OverflowMenu(showMenu: Bool, setShowMenu: (Bool) -> Unit, content: @Composable () -> Unit) { // ... }
TopBar
:
actions = { var (showMenu, setShowMenu) = remember { mutableStateOf(false) } OverflowMenu(showMenu, setShowMenu) { SettingsDropDownItem(onClick = { openDialog.value = true setShowMenu(false) }) } },
另一个选项是创建类似OverflowMenuScope
东西,并在这个范围上运行SettingsDropDownItem
以便它可以关闭菜单本身: OverflowMenu
:
interface OverflowMenuScope { fun closeMenu() } @Composable fun OverflowMenu(content: @Composable OverflowMenuScope.() -> Unit) { var showMenu by remember { mutableStateOf(false) } val scope = remember { object: OverflowMenuScope { override fun closeMenu() { showMenu = false } } } //... DropdownMenu( expanded = showMenu, onDismissRequest = { showMenu = false } ) { scope.content() } }
SettingsDropDownItem
:
@Composable fun OverflowMenuScope.SettingsDropDownItem(onClick: () -> Unit) { DropdownMenuItem(onClick = { closeMenu() onClick() }) { Icon( Icons.Filled.Settings, contentDescription = "Settings", modifier = Modifier.size(24.dp) ) Spacer(modifier = Modifier.width(8.dp)) Text("Settings") } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.