Android Compose, ExponsedropdownMenu positioniert nicht ordnungsgemäß, wenn die Ankerposition geändert wird ⇐ Android

[Anonymous]

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>

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
)
)
}

Ausgabe