Автозаполнение компонуемое

Я создаю компонуемую функцию автозаполнения на основе этого ответа:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoComplete(
    labelText: String,
    options: List<String>,
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
) {
    var expanded = value.length > 2
    val filterOpts = options.filter { it.contains(value, ignoreCase = true) }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded }) {
        TextField(
            label = { Text(text = labelText) },
            readOnly = true,
            value = value,
            onValueChange = onValueChange,
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            modifier = modifier.menuAnchor(),
            keyboardOptions = keyboardOptions,
        )
        if (!filterOpts.isEmpty()) {
            ExposedDropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }) {
                filterOpts.forEach { option ->
                    DropdownMenuItem(
                        text = { Text(text = option) },
                        onClick = {
                            onValueChange(option)
                            expanded = false
                        }
                    )
                }
            }
        }
    }
}

Я использую это так:

        val names = listOf("Tony Stark", "Steve Rogers", "Bruce Banner", "Natasha Romanoff")
        var name by remember {
            mutableStateOf("")
        }

        AutoComplete(
            labelText = "Name",
            options = names,
            value = name,
            onValueChange = { name = it },
        )

Когда я запускаю это и фокусируюсь на поле «Имя», у меня нет экранной клавиатуры в эмуляторе, и набор текста на моем ноутбуке ничего не дает. Что мне не хватает? Как сфокусировать внимание ребенка TextField, чтобы система автоматически показывала клавиатуру?

1
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вам нужна клавиатура, не устанавливайте readOnly = true.

Кроме того, я не знаю, чего вы пытаетесь достичь, но var expanded = value.length > 2 будет держать раскрывающееся меню открытым даже после выбора опции. Чтобы избежать этого, вы можете объявить expanded как обычное запоминаемое логическое значение:

var expanded by remember { mutableStateOf(false) }

И проверяйте длину значения только после изменения значения в TextField:

onValueChange = {
    expanded = value.length > 2
    onValueChange(it)
},

Ааа... readOnly = true почти наверняка проблема. Это артефакт копирования и вставки из похожей сборки, которую я сделал, под названием Select. Что касается var expanded = value.length > 2, намерение состоит в том, чтобы автозаполнение начиналось после ввода двух символов, но из-за нарушения редактирования я не смог проверить, работает ли это так, как задумано.

Code-Apprentice 01.09.2024 16:51

Другие вопросы по теме