如何控制 Jetpack Compose 中的 DropDownMenu 位置

Question

我有一排文本在开头对齐，图像在结尾对齐。 当我按下图像时，我正在显示一个 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")
            }
        }
    }
}

Answer 1

正如文件所说：

DropdownMenu 的行为类似于 Popup，并将使用父布局的位置将其自身定位在屏幕上。

您需要将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")
            }
        }
    }
}

Answer 2

使用DropdownMenu() 的 offset 参数。

DropdownMenu(
    offset = DpOffset(x = (-66).dp, y = (-10).dp)
)

更改x和y值。 他们接受正面和负面的价值观。