Фильтровать список во время ввода

В этом руководстве объясняется, как фильтровать список строк на основе ввода текста в Jetpack Compose. Используйте этот подход для динамического обновления списка на основе поисковых запросов пользователей.

Совместимость версий

Эта реализация работает с версиями Compose 1.2.0 и выше.

Зависимости

Включите следующие зависимости в свой build.gradle :

Фильтрация списка на основе ввода текста

Следующие фрагменты вместе создают список, который обновляется в реальном времени по мере ввода пользователем текста. В этом примере используется ViewModel для хранения данных списка и логики фильтрации, а функция FilterTextView() создает пользовательский интерфейс, который автоматически обновляется при изменении текста фильтра.

class FilterTextViewModel : ViewModel() {
    private val items = listOf(
        "Cupcake",
        "Donut",
        "Eclair",
        "Froyo",
        "Gingerbread",
        "Honeycomb",
        "Ice Cream Sandwich"
    )

    private val _filteredItems = MutableStateFlow(items)
    var filteredItems: StateFlow<List<String>> = _filteredItems

    fun filterText(input: String) {
        // This filter returns the full items list when input is an empty string.
        _filteredItems.value = items.filter { it.contains(input, ignoreCase = true) }
    }
}
FilterText.kt

Ключевые моменты о коде

• Код ViewModel абстрагирует работу фильтрации от составного объекта.
• ViewModel содержит как исходные, так и отфильтрованные списки. Он определяет список элементов и MutableStateFlow для хранения отфильтрованных элементов.
• Функция filterText фильтрует список на основе предоставленной входной строки и обновляет состояние filteredItems , которое передается обратно в пользовательский интерфейс.

@Composable
fun FilterTextView(modifier: Modifier = Modifier, viewModel: FilterTextViewModel = viewModel()) {
    val filteredItems by viewModel.filteredItems.collectAsStateWithLifecycle()
    var text by rememberSaveable { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(all = 10.dp)
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = {
                text = it
                viewModel.filterText(text)
            },
            label = { Text("Filter Text") },
            modifier = Modifier.fillMaxWidth()
        )

        LazyColumn {
            items(
                count = filteredItems.size,
                key = { index -> filteredItems[index] }
            ) {
                ListItem(
                    headlineContent = { Text(filteredItems[it]) },
                    modifier = Modifier
                        .fillParentMaxWidth()
                        .padding(10.dp)
                )
            }
        }
    }
}
FilterText.kt

Ключевые моменты о коде

• Отображает OutlinedTextField для пользовательского ввода и LazyColumn для отображения отфильтрованных элементов списка.
• Собирает поток состояния filteredItems из ViewModel и преобразует его в объект State с учетом жизненного цикла.
  • collectAsStateWithLifecycle собирает последнее значение из StateFlow и перекомпоновывает пользовательский интерфейс при изменении значения.
• text by rememberSaveable { mutableStateOf("") } создает переменную состояния text для хранения текущего текста, введенного в текстовое поле фильтра.
  • rememberSaveable сохраняет значение текста при изменении конфигурации.
  • Ключевое слово by делегирует значение текста свойству value объекта MutableState .
• OutlinedTextField вызывает функцию filterText из модели представления, когда изменения текста вызывают обратный вызов onValueChange .

Результат

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Запросить ввод пользователя

Узнайте, как реализовать способы взаимодействия пользователей с вашим приложением путем ввода текста и использования других средств ввода.

Сборник кратких руководств

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.

Перейти к часто задаваемым вопросам Оставить отзыв