Android Compose, ExponsedropdownMenu positioniert nicht ordnungsgemäß, wenn die Ankerposition geändert wird
Posted: 12 Mar 2025, 13:14
Ich verwende exposedDropdownMenubox in Android, um Dropdown -Optionen anzuzeigen. Mein Layout enthält ein Eingabefeld, und wenn der Benutzer versucht, Daten einzugeben, wird die Tastatur angezeigt. Wenn der Benutzer jedoch versucht, eine Dropdown -Option auszuwählen, lehnt die Tastatur ab, wodurch sich der Fokus auf die Dropdown -Down -Sache verlagert. Das Problem tritt auf, wenn die Tastatur abgewiesen wird: Die Ankerposition verschiebt sich jedoch nach unten, aber die Dropdown bleibt in ihrer ursprünglichen Position, was zu einer schlechten Benutzererfahrung führt. < /P>
Ausgabe
Code: Select all
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DropdownMenu(
label: String,
options: List,
resolveOption: (t: T) -> String,
selectedOption: T,
onOptionSelected: (t: T) -> Unit
) {
var expanded by remember { mutableStateOf(false) }
val focusRequester = remember { FocusRequester() }
ExposedDropdownMenuBox(expanded = expanded, onExpandedChange = { expanded = it }) {
OutlinedTextField(
value = resolveOption(selectedOption),
onValueChange = { },
label = { Text(label) },
readOnly = true,
trailingIcon = {
ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
},
modifier = Modifier
.menuAnchor()
.fillMaxWidth()
.clickable {
Log.d("Testing", "Dropdown clicked")
expanded = !expanded
}
.focusRequester(focusRequester)
)
ExposedDropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false }
) {
options.forEach { option ->
DropdownMenuItem(text = {
Text(text = resolveOption(option))
}, onClick = {
onOptionSelected(option)
expanded = false
})
}
}
}
}
@Composable
fun test() {
val debitOptions = listOf("Credit card", "Debit card", "Net Banking", "PhonePe", "Cash")
DropdownMenu(
label = "XXX",
options = debitOptions,
resolveOption = { it },
selectedOption = "",
onOptionSelected = { }
)
val bank = listOf("Kotak", "HDFC", "SBI", "ICICI", "Cash")
DropdownMenu(
label = "XXX",
options = bank,
resolveOption = { it },
selectedOption = "",
onOptionSelected = { }
)
DropdownMenu(
label = "XXX",
options = debitOptions,
resolveOption = { it },
selectedOption = "",
onOptionSelected = { }
)
DropdownMenu(
label = "XXX",
options = bank,
resolveOption = { it },
selectedOption = "",
onOptionSelected = { }
)
DropdownMenu(
label = "XXX",
options = debitOptions,
resolveOption = { it },
selectedOption = "",
onOptionSelected = { }
)
DropdownMenu(
label = "XXX",
options = bank,
resolveOption = { it },
selectedOption = "",
onOptionSelected = { }
)
OutlinedTextField(
value = "",
onValueChange = {},
label = { Text(text = "Amount") },
keyboardOptions = KeyboardOptions.Default.copy(
keyboardType = KeyboardType.Decimal // Allow decimal input
)
)
}