Filtrar uma lista enquanto você digita

Este guia explica como filtrar uma lista de strings com base na entrada de texto no Jetpack Compose. Use essa abordagem para atualizar dinamicamente uma lista com base nas consultas de pesquisa do usuário.

Compatibilidade de versões

Essa implementação funciona com as versões 1.2.0 e mais recentes do Compose.

Dependências

Inclua as seguintes dependências no build.gradle:

Filtrar uma lista com base na entrada de texto

Juntos, os snippets a seguir produzem uma lista que é atualizada em tempo real conforme o usuário digita. Este exemplo usa um ViewModel para armazenar os dados da lista e a lógica de filtragem, enquanto a função FilterTextView() cria a interface que é atualizada automaticamente sempre que o texto do filtro muda.

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

Pontos principais sobre o código

  • O código ViewModel abstrai o trabalho de filtragem do elemento combinável.
  • O ViewModel contém as listas originais e filtradas. Ele define uma lista de itens e um MutableStateFlow para armazenar os itens filtrados.
  • A função filterText filtra a lista com base na string de entrada fornecida e atualiza o estado filteredItems, que é transmitido de volta à interface.

@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

Pontos principais sobre o código

  • Mostra um OutlinedTextField para a entrada do usuário e um LazyColumn para mostrar os itens da lista filtrados.
  • Coleta o fluxo de estado filteredItems do ViewModel e o converte em um objeto State ciente do ciclo de vida.
  • text by rememberSaveable { mutableStateOf("") } cria uma variável de estado text para armazenar o texto atual inserido no campo de texto do filtro.
    • O rememberSaveable preserva o valor do texto em todas as mudanças de configuração.
    • A palavra-chave by delega o valor de texto à propriedade value do objeto MutableState.
  • OutlinedTextField chama a função filterText do modelo de visualização quando as mudanças de texto acionam o callback onValueChange.

Resultado

Figura 1. Uma lista filtrada que é atualizada quando um novo texto é inserido.

Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:

Aprenda a implementar maneiras de os usuários interagirem com seu app inserindo texto e usando outras formas de entrada.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback