Jetpack Compose 1.0.0-beta04 SearchBar Sample

QrHistoryScreen.kt

@ExperimentalComposeUiApi
@Composable
fun QrHistoryScreen(
    viewModel: QrHistoryViewModel,
) {
    val list by viewModel.qrHistoryFlow.collectAsState()
    val query by viewModel.query.collectAsState()

    viewModel.onLoad()

    CompositionLocalProvider(LocalQrHistoryViewModel provides viewModel) {

        Column {
            SearchBar(query)
            QrHistoryList(
                qrResults = list,               
            )
        }
    }
}

QrHistoryViewModel.kt

class QrHistoryViewModel(
    private val searchQrResultUseCase: SearchQrResultUseCase,
    private val defaultDispatcher: CoroutineDispatcher = Dispatchers.IO,
) : ViewModel() {
    private val _qrHistoryFlow = MutableStateFlow<List<QrResult>>(emptyList())
    val qrHistoryFlow: StateFlow<List<QrResult>> = _qrHistoryFlow
    private val _query = MutableStateFlow("")
    val query: StateFlow<String> = _query

    fun newSearch(query: String) {
        viewModelScope.launch(defaultDispatcher) {
            val result = searchQrResultUseCase.execute(query)
            _qrHistoryFlow.value = result.list
        }
    }

    fun onQueryChanged(query: String) {
        _query.value = query
        newSearch(query)
    }
}

SearchBar.kt

@ExperimentalComposeUiApi
@Composable
private fun SearchBar(query: String) {
    val viewModel = LocalQrHistoryViewModel.current
    val keyboardController = LocalSoftwareKeyboardController.current
    Row(modifier = Modifier.fillMaxWidth()) {
        TextField(
            value = query,
            onValueChange = { newValue ->
                viewModel.onQueryChanged(newValue)
            },
            modifier = Modifier
                .fillMaxWidth(fraction = 0.9f)
                .padding(8.dp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = DevChallengeTheme.colors.surface,
                cursorColor = DevChallengeTheme.colors.onSurface,
                leadingIconColor = DevChallengeTheme.colors.onSurface,
                focusedIndicatorColor = DevChallengeTheme.colors.onSurface,
                unfocusedIndicatorColor = DevChallengeTheme.colors.onSurface,
            ),
            label = {
                Text("Search", color = DevChallengeTheme.colors.textBody1)
            },
            keyboardOptions = KeyboardOptions(
                imeAction = ImeAction.Search,
                autoCorrect = false,
                keyboardType = KeyboardType.Text,
            ),
            leadingIcon = {
                Icon(Icons.Filled.Search, null)
            },
            keyboardActions = KeyboardActions(onSearch = {
                viewModel.newSearch(query)
                keyboardController?.hide()
            }),
            textStyle = TextStyle(color = DevChallengeTheme.colors.onSurface)
        )
    }
}