Jetpack Compose 中下拉框实现

下拉框实现"/>

Jetpack Compose 中下拉框实现

下拉菜单主要 以下三种实现：

@ExperimentalMaterialApi
@Composable
fun ExposedDropdownMenuBox(expanded: Boolean,onExpandedChange: (Boolean) -> Unit,modifier: Modifier = Modifier,content: @Composable ExposedDropdownMenuBoxScope.() -> Unit
)

实现代码：

@file:OptIn(ExperimentalMaterial3Api::class)package com.example.myapplication.ui.menuimport androidxpose.foundation.clickable
import androidxpose.foundation.layout.Arrangement
import androidxpose.foundation.layout.Column
import androidxpose.foundation.layout.fillMaxSize
import androidxpose.material3.*
import androidxpose.runtime.*
import androidxpose.ui.Alignment
import androidxpose.ui.Modifier
import androidxpose.ui.tooling.preview.Preview@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DropdownMenuDemo() {Column(modifier = Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {DropdownMenuSample()ExposedDropdownMenuSample()EditableExposedDropdownMenuSample()}}@Composable
fun DropdownMenuSample() {var selectedOption by remember { mutableStateOf("Option 1") }var isExposedDropdownOpen by remember { mutableStateOf(false) }Column() {DropdownMenu(expanded = isExposedDropdownOpen,onDismissRequest = { isExposedDropdownOpen = false }) {DropdownMenuItem(onClick = {selectedOption = "Option 1"isExposedDropdownOpen = false}, text = {Text("Option 1")})DropdownMenuItem(onClick = {selectedOption = "Option 2"isExposedDropdownOpen = false}, text = {Text("Option 2")})DropdownMenuItem(onClick = {selectedOption = "Option 3"isExposedDropdownOpen = false}, text = {Text("Option 3")})}Button(onClick = {isExposedDropdownOpen = true}) {Text(text = "点击")}}
}@Composable
fun ExposedDropdownMenuSample() {val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")var expanded by remember { mutableStateOf(false) }var selectedOptionText by remember { mutableStateOf(options[0]) }// We want to react on tap/press on TextField to show menuExposedDropdownMenuBox(expanded = expanded,onExpandedChange = {expanded = !expanded}) {TextField(readOnly = true,value = selectedOptionText,onValueChange = { },label = { Text("Label") },trailingIcon = {ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)},colors = ExposedDropdownMenuDefaults.textFieldColors(),modifier = Modifier.menuAnchor())ExposedDropdownMenu(expanded = expanded,onDismissRequest = {expanded = false},) {options.forEach { selectionOption ->DropdownMenuItem(text = {Text(selectionOption)},onClick = {selectedOptionText = selectionOptionexpanded = false})}}}
}@Composable
fun EditableExposedDropdownMenuSample() {val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")var expanded by remember { mutableStateOf(false) }var selectedOptionText by remember { mutableStateOf("") }ExposedDropdownMenuBox(expanded = expanded,onExpandedChange = {expanded = !expanded}) {TextField(value = selectedOptionText,onValueChange = {selectedOptionText = itexpanded = true},label = { Text("Label") },trailingIcon = {ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)},colors = ExposedDropdownMenuDefaults.textFieldColors(),modifier = Modifier.menuAnchor())// filter options based on text field valueval filteringOptions =options.filter { it.contains(selectedOptionText, ignoreCase = true) }if (filteringOptions.isNotEmpty()) {ExposedDropdownMenu(expanded = expanded,onDismissRequest = {expanded = false}) {filteringOptions.forEach { selectionOption ->DropdownMenuItem(text = {Text(text = selectionOption)},onClick = {selectedOptionText = selectionOptionexpanded = false})}}}}
}@Preview
@Composable
fun DropdownMenuDemoPreview() {DropdownMenuDemo()
}