Composable Function: यह क्या है, फ़ंक्शन सिंटैक्स और नियम

Jetpack Compose में Composable Function क्या है

Composable Function Kotlin भाषा में एक फ़ंक्शन है, जो @Composable एनोटेशन से चिह्नित है, जो घोषणात्मक तरीके से यूज़र इंटरफ़ेस के एक भाग का वर्णन करता है। Java कोड या XML मार्कअप के माध्यम से View ऑब्जेक्ट बनाने और कॉन्फ़िगर करने के बजाय, डेवलपर बस लिखता है कि डेटा की प्रत्येक स्थिति के लिए UI कैसा दिखना चाहिए।

Composable फ़ंक्शन और पारंपरिक Android View सिस्टम के बीच मुख्य अंतर अपडेट मॉडल में है। क्लासिक दृष्टिकोण में, डेवलपर मैन्युअल रूप से findViewById कॉल करता था, setText के माध्यम से टेक्स्ट बदलता था, और setVisibility के माध्यम से दृश्यता प्रबंधित करता था। Composable Function आपको इस दिनचर्या से मुक्त करता है: जब डेटा बदलता है, सिस्टम स्वयं निर्धारित करता है कि किन फ़ंक्शन को पुनर्चालित करने की आवश्यकता है और केवल उन्हें निष्पादित करता है।

Kotlin कंपाइलर, @Composable एनोटेशन को प्रोसेस करते हुए, अतिरिक्त कोड उत्पन्न करता है जो फ़ंक्शन को संरचना तंत्र में एकीकृत करता है। इस कोड में स्लॉट में पढ़ना और लिखना शामिल है — विशेष मेमोरी सेल जो वर्तमान UI ट्री में प्रत्येक Composable फ़ंक्शन की स्थिति और पैरामीटर संग्रहीत करते हैं। इस एकीकरण के लिए धन्यवाद, Compose जानता है कि कौन से फ़ंक्शन किस डेटा पर निर्भर हैं।

Composable फ़ंक्शन घोषणा सिंटैक्स

Composable फ़ंक्शन का सिंटैक्स अत्यंत संक्षिप्त है: बस fun कीवर्ड से पहले @Composable जोड़ें। फ़ंक्शन किसी भी पैरामीटर को स्वीकार कर सकता है, अपने बॉडी में अन्य Composable कॉल शामिल कर सकता है, और सशर्त UI रेंडरिंग के लिए Kotlin निर्माणों — शर्तों, लूप्स, when-एक्सप्रेशन — का उपयोग कर सकता है।

@Composable
fun ProductItem(
    product: Product,
    modifier: Modifier = Modifier,
    onAddToCart: () -> Unit
) {
    Card(modifier = modifier.padding(8.dp)) {
        Row(modifier = Modifier.fillMaxWidth().padding(12.dp),
            verticalAlignment = Alignment.CenterVertically) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = product.name, style = MaterialTheme.typography.titleMedium)
                Text(text = "${product.price}", color = MaterialTheme.colorScheme.primary)
            }
            Button(onClick = onAddToCart) {
                Text("कार्ट में जोड़ें")
            }
        }
    }
}

इस उदाहरण में, ProductItem Composable फ़ंक्शन एक Product ऑब्जेक्ट, एक मॉडिफ़ायर और एक कॉलबैक स्वीकार करता है। तीनों पैरामीटर अपरिवर्तनीय हैं, जो पुनर्संरचना के दौरान पूर्वानुमानित व्यवहार सुनिश्चित करता है। मॉडिफ़ायर को डिफ़ॉल्ट मान के साथ पैरामीटर के रूप में पास किया जाता है — यह एक मानक अभ्यास है जो कॉल करने वाले को पैडिंग और आकार अनुकूलित करने की अनुमति देता है।

Composable फ़ंक्शन में कम्पोनेंट और मॉडिफ़ायर

Composable फ़ंक्शन के अंदर, अंतर्निहित Material Design कम्पोनेंट (Text, Button, Card, TextField) या मौलिक प्रिमिटिव (Canvas, Layout) का उपयोग किया जाता है। प्रत्येक कम्पोनेंट दिखावट और व्यवहार को कॉन्फ़िगर करने के लिए पैरामीटर स्वीकार करता है, साथ ही modifier पैरामीटर के माध्यम से एक या अधिक मॉडिफ़ायर स्वीकार करता है।

मॉडिफ़ायर फ़ंक्शन की एक श्रृंखला है जो कम्पोनेंट के आकार, स्थिति, ईवेंट हैंडलिंग और दिखावट को बदलते हैं। श्रृंखला में मॉडिफ़ायर का क्रम मायने रखता है: clickable.semantics, semantics.clickable से अलग काम करता है, और padding.background पैडिंग सहित क्षेत्र और पृष्ठभूमि दोनों को रंगता है, जो डिज़ाइन करते समय महत्वपूर्ण है।

Composable फ़ंक्शन के अंदर, आप सशर्त रेंडरिंग के लिए if और when शर्तों का उपयोग कर सकते हैं, साथ ही गतिशील सूचियों के लिए for लूप का भी उपयोग कर सकते हैं। ये सभी निर्माण स्वाभाविक रूप से काम करते हैं क्योंकि Kotlin एक पूर्ण प्रोग्रामिंग भाषा है। हालांकि, यह याद रखना महत्वपूर्ण है: यदि किसी शर्त या लूप में Composable फ़ंक्शन कॉल शामिल हैं, तो वे भी पुनर्संरचना में भाग लेते हैं।

@Composable
fun ProductList(
    products: List<Product>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier = modifier) {
        items(products, key = { it.id }) { product ->
            ProductItem(
                product = product,
                onAddToCart = { /* add to cart */ }
            )
        }
    }
}

वास्तविक स्क्रीन के लिए Composable फ़ंक्शन उदाहरण

आइए कई Composable फ़ंक्शन का उपयोग करके उत्पाद खोज स्क्रीन का एक उदाहरण देखें। यहाँ विशिष्ट पैटर्न दिखाए गए हैं: स्थिति वाला इनपुट फ़ील्ड, सूची फ़िल्टरिंग, खाली परिणाम हैंडलिंग और लोडिंग।

data class Product(
    val id: String,
    val name: String,
    val price: Double,
    val category: String
)

@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    val products = remember(query) { getFilteredProducts(query) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        OutlinedTextField(
            value = query,
            onValueChange = { query = it },
            label = { Text("उत्पाद खोजें") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        when (products) {
            is Loading -> CircularProgressIndicator()
            is Empty -> Text("कोई परिणाम नहीं मिला")
            is Result -> LazyColumn {
                items(products.items, key = { it.id }) { product ->
                    ProductItem(product = product, onAddToCart = {})
                }
            }
        }
    }
}

यह उदाहरण एक साथ कई तरीकों को प्रदर्शित करता है: खोज क्वेरी स्थिति को संरक्षित करने के लिए remember, कुंजी के साथ फ़िल्टर करने के लिए remember(query), तीन UI स्थितियों के लिए when और कुशल सूची प्रस्तुतीकरण के लिए LazyColumn। ये प्रत्येक तरीके Compose एप्लिकेशन विकसित करने के व्यावहारिक अनुभव का परिणाम हैं।

पैरामीटर और Slot API

Composable फ़ंक्शन सामान्य Kotlin फ़ंक्शन की तरह ही पैरामीटर स्वीकार करते हैं, लेकिन एक महत्वपूर्ण अंतर के साथ: एक पैरामीटर @Composable एनोटेशन के साथ lambda के माध्यम से पास किया गया दूसरा Composable फ़ंक्शन हो सकता है। इस तंत्र को Slot API कहा जाता है और यह पुन: प्रयोज्य कंटेनर बनाने का मुख्य पैटर्न है।

Slot API उस समस्या को हल करता है जो पारंपरिक View सिस्टम में ViewGroup और प्रोग्रामेटिक रूप से चाइल्ड View जोड़ने के माध्यम से हल की जाती थी। addView विधियों के बजाय, Compose content lambdas का उपयोग करता है — @Composable () -> Unit प्रकार वाला अंतिम पैरामीटर। कॉल करने वाला इस lambda में कोई भी UI पास करता है, और कंटेनर केवल उसका लेआउट परिभाषित करता है।

Composable फ़ंक्शन पैरामीटर के डिफ़ॉल्ट मान हो सकते हैं, जो विभिन्न संदर्भों में उनके उपयोग को सरल बनाता है। यह अनुशंसा की जाती है कि केवल उन पैरामीटर को अनिवार्य बनाएं जिनके बिना फ़ंक्शन अपना कार्य नहीं कर सकता, और शेष के लिए उचित डिफ़ॉल्ट मान प्रदान करें।

Kotlin में Composable फ़ंक्शन के तरीके

Compose समुदाय में कई स्थापित तरीके उभरे हैं जो Composable फ़ंक्शन को अधिक पठनीय और पूर्वानुमानित बनाते हैं। पहला है State Hoisting: स्थिति को उच्च स्तर पर उठाया जाता है, और Composable फ़ंक्शन इसे पैरामीटर के माध्यम से प्राप्त करता है। यह फ़ंक्शन को शुद्ध और विभिन्न संदर्भों में पुन: प्रयोज्य बनाता है।

दूसरा तरीका है Event-driven पैरामीटर। Composable फ़ंक्शन में ViewModel या useCase पास करने के बजाय, केवल विशिष्ट कॉलबैक पास किए जाते हैं: onSave, onDelete, onNavigateToDetail। यह युग्मन को कम करता है और परीक्षण को सरल बनाता है — ProductItem के परीक्षण के लिए ViewModel की आवश्यकता नहीं है, केवल एक lambda स्टब की।

तीसरा तरीका है CompositionLocal संरचना ट्री के माध्यम से साझा डेटा पास करने के लिए। थीम, स्क्रीन घनत्व, वर्तमान Route — यह सब CompositionLocal के माध्यम से पास किया जाता है, दर्जनों Composable फ़ंक्शन के माध्यम से पैरामीटर श्रृंखला से बचते हुए। हालांकि, CompositionLocal का अत्यधिक उपयोग नहीं करना चाहिए: स्पष्ट पैरामीटर हमेशा अंतर्निहित निर्भरताओं से बेहतर होते हैं।

// State Hoisting: स्थिति मूल फ़ंक्शन में उठाई गई
@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "काउंटर: $count", style = MaterialTheme.typography.headlineLarge)
        Button(onClick = onIncrement) {
            Text("+1")
        }
    }
}

// State Hoisting के साथ उपयोग
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}