Memfilter daftar saat mengetik

Panduan ini menjelaskan cara memfilter daftar string berdasarkan input teks di Jetpack Compose. Gunakan pendekatan ini untuk memperbarui daftar secara dinamis berdasarkan kueri penelusuran pengguna.

Kompatibilitas versi

Implementasi ini berfungsi dengan Compose versi 1.2.0 dan yang lebih tinggi.

Dependensi

Sertakan dependensi berikut dalam build.gradle Anda:

Memfilter daftar berdasarkan input teks

Bersama-sama, cuplikan berikut menghasilkan daftar yang diperbarui secara real time saat pengguna mengetik. Contoh ini menggunakan ViewModel untuk menyimpan data daftar dan logika pemfilteran, sedangkan fungsi FilterTextView() membuat UI yang diperbarui secara otomatis setiap kali teks filter berubah.

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

Poin-poin penting tentang kode

  • Kode ViewModel memisahkan pekerjaan pemfilteran dari composable.
  • ViewModel menyimpan daftar asli dan yang difilter. Class ini menentukan daftar item dan MutableStateFlow untuk menyimpan item yang difilter.
  • Fungsi filterText memfilter daftar berdasarkan string input yang diberikan dan memperbarui status filteredItems, yang diteruskan kembali ke 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

Poin-poin penting tentang kode

  • Menampilkan OutlinedTextField untuk input pengguna dan LazyColumn untuk menampilkan item daftar yang difilter.
  • Mengumpulkan alur status filteredItems dari ViewModel dan mengonversinya menjadi objek State yang mendukung siklus proses.
  • text by rememberSaveable { mutableStateOf("") } membuat variabel status text untuk menyimpan teks saat ini yang dimasukkan di kolom teks filter.
    • rememberSaveable mempertahankan nilai teks di seluruh perubahan konfigurasi.
    • Kata kunci by mendelegasikan nilai teks ke properti nilai objek MutableState.
  • OutlinedTextField memanggil fungsi filterText dari model tampilan saat perubahan teks memicu callback onValueChange.

Hasil

Gambar 1. Daftar yang difilter yang diperbarui saat teks baru dimasukkan.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Pelajari cara menerapkan cara bagi pengguna untuk berinteraksi dengan aplikasi Anda dengan memasukkan teks dan menggunakan cara input lainnya.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan