在 Jetpack Compose 中的 viewModel 问题中列出搜索答案

【问题标题】：List search inside viewModel issue in Jetpack Compose在 Jetpack Compose 中的 viewModel 问题中列出搜索
【发布时间】：2021-09-15 08:20:15
【问题描述】：

我正在尝试在 Compose 项目中创建名称搜索功能。我有一个DummyClient 的列表，我将其用作视图模型上的数据源。我正在尝试搜索此列表，因此更新后的结果可以显示在 LazyColumn 上，它不会返回任何错误但会提供意外结果。

class ClientViewModel : ViewModel() {
    private var _clients = MutableLiveData(dummyClients)
    val clients: LiveData<List<DummyClient>>
        get() = _clients

    fun searchClients(name: String) {
        val foundClients: List<DummyClient?> = listOf(dummyClients.find {
            it.name.contains(name)
        })
        _clients.value === foundClients
    }
}

这个 ViewModel 从导航传递给 ClientDirectoryScreen 组合，它在 LazyColumn 上显示搜索栏和客户端列表：

val clientViewModel: ClientViewModel = ViewModel()
...
composable(Screen.Clients.route) {
    ClientDirectoryScreen(
        ...
        clientViewModel = clientViewModel
    )
}

@Composable
fun ClientDirectoryScreen(
    ...
    clientViewModel: ClientViewModel
) {
    val clients by clientViewModel.clients.observeAsState(listOf())
    val showSearchBar by clientViewModel.showSearchBar.observeAsState(false)

    if (clients.isNotEmpty()) {
        Column {

            // show the search bar on search icon click
            if (showSearchBar) ClientSearchCard(clientViewModel)

            LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
                items(clients) { client ->
                    ClientNameCard(client)
                }
            }
        }
    }
}

而且搜索栏会调用 ViewModel 中的搜索，这并不反映搜索：

@Composable
fun ClientSearchCard(clientViewModel: ClientViewModel) {
    var searchText by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        TextField(
            value = searchText,
            onValueChange = {
                searchText = it
                clientViewModel.searchClients(searchText)
            },
            label = { Text("Search:") },
            modifier = Modifier.fillMaxWidth()
        )
    }
}

如果我在视图模型中记录搜索结果，搜索不会提供正确的结果。另外，我在ClientDirectoryScreen 中看不到clients 变量的任何状态变化。

【问题讨论】：

你是什么意思“搜索没有提供正确的结果”。预期的结果是什么，真实的结果是什么？
搜索应返回过滤DummyClient 的客户端列表，其中包含搜索的字符。但它始终显示完整列表 - 因此显示搜索对列表没有影响。
_clients.value === foundClients 你在这里比较两个对象，而不是更新
谢谢！如果我将其更新为_clients.value = foundClients，则会出现此错误：Type mismatch: inferred type is List<DummyClient?> but List<DummyClient>? was expected

标签： android kotlin android-jetpack-compose

【解决方案1】：

find 只会返回一个元素，结果是可选的，因为集合可能没有。

您可以在集合上使用filter：它会返回所有匹配的元素：

val foundClients = dummyClients.filter {
    it.name.contains(name)
}
_clients.value = foundClients

【讨论】：