Jetpack Compose 下拉列表实现教程:使用 DropdownMenu 和 DropdownMenuItem
在 Jetpack Compose 中,可以使用'DropdownMenu'和'DropdownMenuItem'来创建下拉列表。
首先,你需要在 Compose 函数中创建一个可变状态变量来跟踪下拉列表的打开状态和当前选中的项目。例如:
var expanded by remember { mutableStateOf(false) }
var selectedItem by remember { mutableStateOf("") }
然后,你可以在 Compose 函数中使用'DropdownMenu'和'DropdownMenuItem'来创建下拉列表。'DropdownMenu'是一个容器,用于包含下拉列表中的所有项目。'DropdownMenuItem'则表示一个可选择的项目。例如:
Column {
Box(
modifier = Modifier
.clickable(onClick = { expanded = !expanded })
.fillMaxWidth()
.background(Color.LightGray)
.padding(16.dp)
) {
Text(text = selectedItem)
}
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier.fillMaxWidth()
) {
DropdownMenuItem(onClick = {
selectedItem = "Item 1"
expanded = false
}) {
Text(text = "Item 1")
}
DropdownMenuItem(onClick = {
selectedItem = "Item 2"
expanded = false
}) {
Text(text = "Item 2")
}
DropdownMenuItem(onClick = {
selectedItem = "Item 3"
expanded = false
}) {
Text(text = "Item 3")
}
}
}
这里我们创建了一个包含项 1、项 2 和项 3 的简单下拉列表。当用户点击下拉列表时,'expanded'状态将切换为打开或关闭状态,并且'selectedItem'状态将更新为所选项目的值。
注意,'DropdownMenu'需要一个'expanded'参数来确定是否显示下拉列表,以及一个'onDismissRequest'参数来处理当用户点击屏幕其他区域时如何关闭下拉列表。
以上是在 Jetpack Compose 中创建下拉列表的基本步骤。你可以根据自己的需求进行自定义和扩展。
原文地址: http://www.cveoy.top/t/topic/pjgl 著作权归作者所有。请勿转载和采集!