如何在 Jetpack Compose 中控制 DropDownMenu 的位置
How to control DropDownMenu position in Jetpack Compose
我有一行文本在开头对齐,图像在结尾对齐。当我按下图像时,我显示了一个 DropdownMenu,但它出现在行的开头,我希望它出现在行的末尾。
我正在尝试在修改器组件中使用 Alignment.centerEnd,但没有用。
如何让弹出窗口出现在行的末尾?
@Composable
fun DropdownDemo(currentItem: CartListItems) {
var expanded by remember { mutableStateOf(false) }
Box(modifier = Modifier
.fillMaxWidth()) {
Text(modifier = Modifier.align(Alignment.TopStart),
text = currentItem.type,
color = colorResource(id = R.color.app_grey_dark),
fontSize = 12.sp)
Image(painter = painterResource(R.drawable.three_dots),
contentDescription = "more options button",
Modifier
.padding(top = 5.dp, bottom = 5.dp, start = 5.dp)
.align(Alignment.CenterEnd)
.width(24.dp)
.height(6.75.dp)
.clickable(indication = null,
interactionSource = remember { MutableInteractionSource() },
onClick = {
expanded = true
}))
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier
.background(
Color.LightGray
).align(Alignment.CenterEnd),
) {
DropdownMenuItem(onClick = { expanded = false }) {
Text("Delete")
}
DropdownMenuItem(onClick = { expanded = false }) {
Text("Save")
}
}
}
}
正如documentation所说:
A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen.
您需要将 DropdownMenu
与调用方视图放在一起 Box
。在这种情况下 DropdownMenu
将出现在来电者视图下。
var expanded by remember { mutableStateOf(false) }
Column {
Text("Some text")
Box {
Image(
painter = painterResource(R.drawable.test),
contentDescription = "more options button",
modifier = Modifier
.clickable {
expanded = true
}
)
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
) {
DropdownMenuItem(onClick = { expanded = false }) {
Text("Delete")
}
DropdownMenuItem(onClick = { expanded = false }) {
Text("Save")
}
}
}
}
我有一行文本在开头对齐,图像在结尾对齐。当我按下图像时,我显示了一个 DropdownMenu,但它出现在行的开头,我希望它出现在行的末尾。
我正在尝试在修改器组件中使用 Alignment.centerEnd,但没有用。
如何让弹出窗口出现在行的末尾?
@Composable
fun DropdownDemo(currentItem: CartListItems) {
var expanded by remember { mutableStateOf(false) }
Box(modifier = Modifier
.fillMaxWidth()) {
Text(modifier = Modifier.align(Alignment.TopStart),
text = currentItem.type,
color = colorResource(id = R.color.app_grey_dark),
fontSize = 12.sp)
Image(painter = painterResource(R.drawable.three_dots),
contentDescription = "more options button",
Modifier
.padding(top = 5.dp, bottom = 5.dp, start = 5.dp)
.align(Alignment.CenterEnd)
.width(24.dp)
.height(6.75.dp)
.clickable(indication = null,
interactionSource = remember { MutableInteractionSource() },
onClick = {
expanded = true
}))
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier
.background(
Color.LightGray
).align(Alignment.CenterEnd),
) {
DropdownMenuItem(onClick = { expanded = false }) {
Text("Delete")
}
DropdownMenuItem(onClick = { expanded = false }) {
Text("Save")
}
}
}
}
正如documentation所说:
A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen.
您需要将 DropdownMenu
与调用方视图放在一起 Box
。在这种情况下 DropdownMenu
将出现在来电者视图下。
var expanded by remember { mutableStateOf(false) }
Column {
Text("Some text")
Box {
Image(
painter = painterResource(R.drawable.test),
contentDescription = "more options button",
modifier = Modifier
.clickable {
expanded = true
}
)
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
) {
DropdownMenuItem(onClick = { expanded = false }) {
Text("Delete")
}
DropdownMenuItem(onClick = { expanded = false }) {
Text("Save")
}
}
}
}