टाइप करते समय सूची को फ़िल्टर करना

इस गाइड में, 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 ऑब्जेक्ट की वैल्यू प्रॉपर्टी को सौंपता है.
• जब टेक्स्ट में बदलाव होने पर onValueChange कॉलबैक ट्रिगर होता है, तो OutlinedTextField व्यू मॉडल से filterText फ़ंक्शन को कॉल करता है.

नतीजा

ऐसे संग्रह जिनमें यह गाइड शामिल है

यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

उपयोगकर्ता के इनपुट का अनुरोध करना

जानें कि उपयोगकर्ता आपके ऐप्लिकेशन के साथ कैसे इंटरैक्ट कर सकते हैं. इसके लिए, टेक्स्ट डालने और इनपुट के अन्य तरीकों का इस्तेमाल करने की सुविधा लागू करें.

क्विक गाइड का कलेक्शन

क्या आपका कोई सवाल है या सुझाव/राय देनी है

अक्सर पूछे जाने वाले सवालों के पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करके अपने सुझाव/राय दें.

अक्सर पूछे जाने वाले सवालों पर जाएं सुझाव/राय दें या शिकायत सबमिट करें