本頁面由 Cloud Translation API 翻譯而成。

輸入內容時篩選清單
透過集合功能整理內容你可以依據偏好儲存及分類內容。

本指南說明如何在 Jetpack Compose 中，根據文字輸入內容篩選字串清單。使用這種方法，根據使用者的搜尋查詢動態更新清單。

版本相容性

此實作項目適用於 Compose 1.2.0 以上版本。

依附元件

在 build.gradle 中納入下列依附元件：

以下程式碼片段會一併產生清單，並隨著使用者輸入內容即時更新。這個範例使用 ViewModel 來保留清單資料和篩選邏輯，而 FilterTextView() 函式會建立 UI，在篩選文字變更時自動更新。

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 狀態，然後傳回至 UI。

@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 收集最新值，並在值變更時重組 UI。
text by rememberSaveable { mutableStateOf("") } 會建立狀態變數 text，用於儲存篩選器文字欄位中輸入的目前文字。
- rememberSaveable 會在設定變更期間保留文字的值。
- by 關鍵字會將文字的值委派給 MutableState 物件的 value 屬性。
當文字變更觸發 onValueChange 回呼時，OutlinedTextField 會從檢視區塊模型呼叫 filterText 函式。