@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoCompleteExample() {
Scaffold(topBar = { TopAppBar(title = { Text("AutoCompleteExample") }) }) { innerPadding ->
Column(modifier = Modifier.padding(innerPadding)) {
val names = listOf("Tony Stark", "Steve Rogers", "Bruce Banner", "Natasha Romanoff")
var name by remember { mutableStateOf("") }
val aliases = listOf("Iron Man", "Captain America", "Hulk", "Black Widow")
var alias by remember { mutableStateOf("") }
AutoComplete(
label = { Text("Name") },
options = names,
value = name,
onValueChange = { name = it },
)
AutoComplete(
value = alias,
options = aliases,
onValueChange = { name = it },
label = { Text("Alias") }
)
}
}
}
@Composable
fun AutoComplete(
label: @Composable () -> Unit,
options: List,
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
isError: Boolean = false,
) {
var expanded by remember { mutableStateOf(false) }
var filteredOpts by remember { mutableStateOf(options) }
Column {
TextField(
label = label,
value = value,
onValueChange = {
onValueChange(it)
filteredOpts = options.filter { option ->
option
.lowercase()
.contains(it.lowercase())
}
expanded = true
},
isError = isError,
keyboardOptions = keyboardOptions,
modifier = modifier
)
if (expanded && filteredOpts.isNotEmpty()) {
Column(
modifier = Modifier
.fillMaxWidth(),
) {
filteredOpts.forEach { option ->
DropdownMenuItem(
text = { Text(text = option) },
onClick = {
onValueChange(option)
filteredOpts = emptyList()
expanded = false
}
)
}
}
}
}
}
Пока все хорошо. Однако когда пользователь начинает печатать. Предложения сдвигают второй автозаполнение дальше вниз, а не выполняют рендеринг поверх него. Как это исправить?
Я продолжаю работать над составным объектом автозаполнения из составного объекта автозаполнения, не могу печатать, пока всплывающее окно видимо: [code]@OptIn(ExperimentalMaterial3Api::class) @Composable fun AutoCompleteExample() { Scaffold(topBar = { TopAppBar(title = { Text("AutoCompleteExample") }) }) { innerPadding -> Column(modifier = Modifier.padding(innerPadding)) { val names = listOf("Tony Stark", "Steve Rogers", "Bruce Banner", "Natasha Romanoff") var name by remember { mutableStateOf("") } val aliases = listOf("Iron Man", "Captain America", "Hulk", "Black Widow") var alias by remember { mutableStateOf("") }
AutoComplete( label = { Text("Name") }, options = names, value = name, onValueChange = { name = it }, ) AutoComplete( value = alias, options = aliases, onValueChange = { name = it }, label = { Text("Alias") } ) } } }
@Composable fun AutoComplete( label: @Composable () -> Unit, options: List, value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, isError: Boolean = false, ) { var expanded by remember { mutableStateOf(false) } var filteredOpts by remember { mutableStateOf(options) }
if (expanded && filteredOpts.isNotEmpty()) { Column( modifier = Modifier .fillMaxWidth(), ) { filteredOpts.forEach { option -> DropdownMenuItem( text = { Text(text = option) }, onClick = { onValueChange(option) filteredOpts = emptyList() expanded = false } ) } } } } } [/code] Пока все хорошо. Однако когда пользователь начинает печатать. Предложения сдвигают второй автозаполнение дальше вниз, а не выполняют рендеринг поверх него. Как это исправить? [img]https://i.sstatic.net/Z4MVs5nm.png[/img]
Я продолжаю работать над составным объектом автозаполнения из составного объекта автозаполнения, не могу печатать, пока всплывающее окно видимо:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoCompleteExample() {
Scaffold(topBar = {...
Я продолжаю работать над составным элементом автозаполнения из составного элемента автозаполнения, не могу печатать, пока всплывающее окно видимо:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoCompleteExample() {
Scaffold(topBar = {...
Я продолжаю работать над составным элементом автозаполнения из составного объекта автозаполнения, не могу печатать, пока всплывающее окно видимо:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoCompleteExample() {
Scaffold(topBar = {...