Yazarken bir listeyi filtreleme

Bu kılavuzda, Jetpack Compose'da metin girişine göre dize listesinin nasıl filtreleneceği açıklanmaktadır. Bir listeyi kullanıcı arama sorgularına göre dinamik olarak güncellemek için bu yaklaşımı kullanın.

Sürüm uyumluluğu

Bu uygulama, Compose 1.2.0 ve sonraki sürümleriyle çalışır.

Bağımlılıklar

build.gradle dosyanıza aşağıdaki bağımlılıkları ekleyin:

Bir listeyi metin girişine göre filtreleme

Aşağıdaki snippet'ler birlikte, kullanıcı yazarken gerçek zamanlı olarak güncellenen bir liste oluşturur. Bu örnekte, liste verilerini ve filtreleme mantığını tutmak için bir ViewModel kullanılırken FilterTextView() işlevi, filtre metni değiştiğinde otomatik olarak güncellenen kullanıcı arayüzünü oluşturur.

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

Kodla ilgili önemli noktalar

  • ViewModel kodu, filtreleme işlemini kompozitten soyutlar.
  • ViewModel hem orijinal hem de filtrelenmiş listeleri içerir. Bir öğe listesi ve filtrelenen öğeleri barındıracak bir MutableStateFlow tanımlar.
  • filterText işlevi, listeyi sağlanan giriş dizesine göre filtreler ve kullanıcı arayüzüne geri aktarılan filteredItems durumunu günceller.

@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

Kodla ilgili önemli noktalar

  • Kullanıcı girişi için OutlinedTextField ve filtrelenen liste öğelerini görüntülemek için LazyColumn gösterir.
  • ViewModel kaynağından filteredItems durum akışını toplar ve yaşam döngüsü bilincine sahip bir State nesnesine dönüştürür.
    • collectAsStateWithLifecycle, StateFlow'ten en son değeri toplar ve değer değiştiğinde kullanıcı arayüzünü yeniden oluşturur.
  • text by rememberSaveable { mutableStateOf("") }, filtre metin alanına girilen mevcut metni tutmak için bir durum değişkeni text oluşturur.
    • rememberSaveable, yapılandırma değişikliklerinde metnin değerini korur.
    • by anahtar kelimesi, text değerini MutableState nesnesinin value mülküne atar.
  • Metin değişiklikleri onValueChange geri çağırma işlevini tetiklediğinde OutlinedTextField, görünüm modelinden filterText işlevini çağırır.

Sonuç

Şekil 1. Yeni metin girildiğinde güncellenen filtrelenmiş bir liste.

Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:

Kullanıcıların metin girerek ve diğer giriş yöntemlerini kullanarak uygulamanızla nasıl etkileşime geçebileceğini öğrenin.
Hızlı rehber koleksiyonu

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek kısa kılavuzlar hakkında bilgi edinebilir veya bize ulaşarak düşüncelerinizi bizimle paylaşabilirsiniz.
SSS'ye gidin Geri bildirim gönderin