Como usar o Compose SearchBar?

Você não precisa fazer nada para atualizar o SearchResultsComposable em cada pressionamento de tecla. A única coisa que falta no seu código são dados reais e uma filteroperação usando o textFieldState.text.

Quando você insere um caractere no SearchBarDefaults.InputField, ele será recomposto. Conforme você passa o inputFieldpara o ExpandedDockedSearchBar, ele será automaticamente recomposto também e a filterexpressão será reavaliada.

Dê uma olhada no código a seguir:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchBarDemo() {

    val animalList = listOf("Dog", "Cat", "Deer", "Cheetah", "Dolphin", "Cougar", "Donkey")

    val textFieldState = rememberTextFieldState()
    val searchBarState = rememberSearchBarState()
    val scope = rememberCoroutineScope()
    val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()

    val inputField =
        @Composable {
            SearchBarDefaults.InputField(
                modifier = Modifier,
                searchBarState = searchBarState,
                textFieldState = textFieldState,
                onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
                placeholder = { Text("Search...") },
                leadingIcon = {
                    if (searchBarState.currentValue == SearchBarValue.Expanded) {
                        IconButton(
                            onClick = { scope.launch { searchBarState.animateToCollapsed() } }
                        ) {
                            Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
                        }
                    } else {
                        Icon(Icons.Default.Search, contentDescription = null)
                    }
                },
                trailingIcon = { Icon(Icons.Default.MoreVert, contentDescription = null) },
            )
        }

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopSearchBar(
                scrollBehavior = scrollBehavior,
                state = searchBarState,
                inputField = inputField,
            )
            ExpandedDockedSearchBar(
                state = searchBarState,
                inputField = inputField,
            ) {
                LazyColumn {
                    items(animalList.filter { it.startsWith(textFieldState.text.toString(), ignoreCase = true) }) {
                        Text(modifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp), text = it)
                    }
                }
            }
        }
    ) { padding ->
        // LazyColumn to show search results
    }
}

Saída:

Use LaunchedEffectwith textFieldState.textpara atualizar os resultados da pesquisa a cada pressionamento de tecla.

Código atualizado:

@Composable
fun DockedSearchBarScaffold() {
    val textFieldState = rememberTextFieldState()
    val searchBarState = rememberSearchBarState()
    val scope = rememberCoroutineScope()
    val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()

    var searchResults by remember { mutableStateOf(emptyList<String>()) }

    // Track text changes and update results
    LaunchedEffect(textFieldState.text) {
        searchResults = performSearch(textFieldState.text)
    }

    val inputField =
        @Composable {
            SearchBarDefaults.InputField(
                modifier = Modifier,
                searchBarState = searchBarState,
                textFieldState = textFieldState,
                onSearch = {
                    scope.launch {
                        searchBarState.animateToCollapsed()
                    }
                },
                placeholder = { Text("Search...") },
                leadingIcon = {
                    if (searchBarState.currentValue == SearchBarValue.Expanded) {
                        IconButton(
                            onClick = { scope.launch { searchBarState.animateToCollapsed() } }
                        ) {
                            Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
                        }
                    } else {
                        Icon(Icons.Default.Search, contentDescription = null)
                    }
                }
            )
        }

    TopSearchBar(
        scrollBehavior = scrollBehavior,
        state = searchBarState,
        inputField = inputField,
    )
    ExpandedDockedSearchBar(
        state = searchBarState,
        inputField = inputField,
    ) {
        SearchResults(
            busStops = searchResults,
            onResultClick = { result ->
                textFieldState.setTextAndPlaceCursorAtEnd(result)
                scope.launch { searchBarState.animateToCollapsed() }
            }
        )
    }
}

// Dummy function to simulate search
fun performSearch(query: String): List<String> {
    return if (query.isNotBlank()) {
        listOf("Result 1 for $query", "Result 2 for $query", "Result 3 for $query")
    } else {
        emptyList()
    }
}

• O uso LaunchedEffect(textFieldState.text)aciona uma recomposição sempre que o conteúdo do campo de texto muda.
• performSearch(textFieldState.text): Simula a pesquisa e atualiza os resultados da pesquisa.
• SearchResults List: Atualiza automaticamente a cada pressionamento de tecla.

Isso garante que os resultados da pesquisa sejam atualizados dinamicamente conforme o usuário digita. 🚀 Avise-me se precisar de modificações!