此页面由 Cloud Translation API 翻译。

在输入时过滤列表
使用集合让一切井井有条根据您的偏好保存内容并对其进行分类。

本指南介绍了如何在 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 以显示过滤后的列表项。
从 ViewModel 收集 filteredItems 状态流，并将其转换为生命周期感知型 State 对象。
- collectAsStateWithLifecycle 会从 StateFlow 收集最新值，并在值发生变化时重组界面。
text by rememberSaveable { mutableStateOf("") } 会创建一个状态变量 text，用于存储在过滤条件文本字段中输入的当前文本。
- rememberSaveable 会在配置更改后保留文本的值。
- by 关键字会将文本的值委托给 MutableState 对象的 value 属性。
当文本更改触发 onValueChange 回调时，OutlinedTextField 会从视图模型调用 filterText 函数。