Androd Compose 如何设置DropdownMenu的宽度和Text一致
要使 DropdownMenu 的宽度与 Box 中的 Text 一致,可以使用以下方法:
- 使用 Modifier.onGloballyPositioned 和 Modifier.width
可以使用 Modifier.onGloballyPositioned 获取 Text 的宽度,并将其设置为 DropdownMenu 的宽度。
var textWidth by remember { mutableStateOf(0) }
var expanded by remember {mutableStateOf(false) }
Box {
Text(
text = "Your Text",
modifier = Modifier.onGloballyPositioned { coordinates ->
textWidth = coordinates.size.width
}
)
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier.width(with(LocalDensity.current) { textWidth.toDp() })
) {
DropdownMenuItem(onClick = { /*TODO*/ }) {
Text("Item 1")
}
// ...other menu items
}
}
- 使用 SubcomposeLayout
可以使用 SubcomposeLayout 测量 Text 的宽度,并将其用作 DropdownMenu 的宽度约束。
var expanded by remember { mutableStateOf(false) }
SubcomposeLayout { constraints ->
val textPlaceable = subcompose("text") {
Text("Your Text")
}[0].measure(constraints)
val dropdownMenuPlaceable = subcompose("dropdownMenu") {
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false }
) {
DropdownMenuItem(onClick = { /*TODO*/ }) {
Text("Item 1")
}
// ... other menu items
}
}[0].measure(constraints.copy(minWidth = textPlaceable.width))
layout(textPlaceable.width, textPlaceable.height + dropdownMenuPlaceable.height) {
textPlaceable.placeRelative(0, 0)
dropdownMenuPlaceable.placeRelative(0, textPlaceable.height)
}
}
这两种方法都可以实现 DropdownMenu 与 Text 宽度相同的效果。选择哪种方法取决于具体需求和代码风格。
请注意,在使用 DropdownMenu 时,需要确保它在 Box 中的 Text 下方正确显示。可以使用 Modifier.clickable 来触发 DropdownMenu 的展开,并根据需要调整 Box 中元素的位置。