@Composable: यह क्या है, Compose एनोटेशन और अनुप्रयोग का दायरा

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

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

@Composable एनोटेशन Google द्वारा 2021 में Jetpack Compose 1.0 के पहले स्थिर संस्करण के साथ पेश किया गया था। इसके प्रकट होने से पहले, Android में इंटरफ़ेस डेवलपमेंट पूरी तरह से XML मार्कअप और View सिस्टम के माध्यम से किया जाता था। @Composable ने दृष्टिकोण को मौलिक रूप से बदल दिया: एक अलग मार्कअप फ़ाइल में UI का वर्णन करने के बजाय, डेवलपर सीधे Kotlin में इंटरफ़ेस लिखता है।

@Composable और सामान्य Kotlin फंक्शन के बीच मुख्य अंतर स्थिति को पढ़ने और उसके परिवर्तनों पर प्रतिक्रिया करने की क्षमता है। जब कोई वेरिएबल जिसे Composable फंक्शन पढ़ता है, अपना मान बदलता है, तो सिस्टम स्वचालित रूप से उस फंक्शन के पुनरारंभ (पुनर्संरचना) को शेड्यूल करता है। यह डेवलपर को findViewById और setText के माध्यम से मैन्युअल रूप से UI अपडेट करने से मुक्त करता है।

@Composable की आंतरिक यांत्रिकी स्लॉट अवधारणा पर आधारित है — एक विशेष मेमोरी क्षेत्र जो संरचना में प्रत्येक फंक्शन के लिए आवंटित किया जाता है। यह स्लॉट फंक्शन को पास किए गए मानों के साथ-साथ बाद के कॉल में तुलना के लिए आवश्यक सेवा जानकारी संग्रहीत करता है।

Composable फंक्शन कैसे घोषित करें

Composable फंक्शन घोषित करने के लिए, fun कीवर्ड से पहले @Composable एनोटेशन जोड़ना पर्याप्त है। फंक्शन एक ऐसे पैकेज में होना चाहिए जो androidx.compose.runtime से एनोटेशन इम्पोर्ट करता हो। फंक्शन का नाम बड़े अक्षर से शुरू करने की अनुशंसा की जाती है — यह Compose समुदाय में व्यापक रूप से स्वीकृत परंपरा है जो UI घटकों को सामान्य फंक्शन से दृश्य रूप से अलग करती है।

import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("नमस्ते, $name!")
        Button(onClick = { count++ }) {
            Text("$count बार क्लिक किया गया")
        }
    }
}

Composable फंक्शन के पैरामीटर कुछ भी हो सकते हैं — आदिम प्रकार, स्ट्रिंग, लैम्ब्डा, और यहां तक कि Slot API के माध्यम से पारित अन्य Composable फंक्शन। अनुशंसा की जाती है कि पैरामीटर को अपरिवर्तनीय (val) बनाया जाए ताकि पुनर्संरचना के दौरान दुष्प्रभावों से बचा जा सके। सभी परिवर्तनीय डेटा को Compose स्थिति तंत्र के माध्यम से प्रबंधित किया जाना चाहिए।

Composable फंक्शन सामान्य फंक्शन की तरह मनमाना मान वापस नहीं कर सकते — उनका एकमात्र कार्य UI ट्री के एक टुकड़े का निर्माण या अद्यतन करना है। हालांकि, विशेष पैटर्न जैसे State Hoisting मौजूद हैं, जहां Compose फंक्शन पैरामीटर के माध्यम से स्थिति और कॉलबैक स्वीकार करता है, शुद्ध और पुन: प्रयोज्य बना रहता है।

Kotlin में Composable फंक्शन के नियम

Compose सिस्टम कई सख्त प्रतिबंध लगाता है कि Composable फंक्शन कैसे दिखने और व्यवहार करने चाहिए। पहला नियम: Composable फंक्शन केवल अन्य Composable फंक्शन या सामान्य फंक्शन को कॉल कर सकता है जिनका कोई दुष्प्रभाव नहीं है। यह संरचना की पूर्वानुमेयता और Compose अनुकूलन के सही संचालन को सुनिश्चित करता है।

दूसरा नियम निष्पादन क्रम से संबंधित है। Compose को Composable फंक्शन को किसी भी क्रम में कॉल करने का अधिकार है, इसलिए ऐसे फंक्शन के मुख्य भाग में कोड को पड़ोसी फंक्शन के कॉल अनुक्रम पर निर्भर नहीं होना चाहिए। प्रत्येक Composable फंक्शन को UI ट्री में अपनी स्थिति के स्तर पर आत्मनिर्भर होना चाहिए।

तीसरा नियम — Composable फंक्शन के मुख्य भाग के अंदर दुष्प्रभावों का निषेध। डेटाबेस में लिखना, नेटवर्क अनुरोध भेजना या बाहरी चर बदलना जैसे संचालन केवल विशेष प्रभावों के अंदर किए जाने चाहिए: LaunchedEffect, DisposableEffect, या SideEffect। इस नियम का उल्लंघन पुनर्संरचना के दौरान अप्रत्याशित व्यवहार की ओर ले जाता है।

चौथा नियम: Composable फंक्शन को इडेम्पोटेंट होना चाहिए। समान तर्कों के साथ उन्हें फिर से कॉल करने पर समान UI उत्पन्न होना चाहिए। यह आवश्यकता स्किपिंग अनुकूलन के सही संचालन के लिए आवश्यक है, जहां Compose उन फंक्शन के पुनः चित्रण को छोड़ देता है जिनके इनपुट डेटा नहीं बदले हैं।

// सही: बिना दुष्प्रभाव के शुद्ध Composable फंक्शन
@Composable
fun UserCard(user: User, onClick: () -> Unit) {
    Card(modifier = Modifier.clickable { onClick() }) {
        Text(text = user.name)
    }
}

// गलत: मुख्य भाग के अंदर दुष्प्रभाव
@Composable
fun WrongCard(userId: String) {
    // val result = viewModel.loadUser(userId)  // अनुमत नहीं
    Text("लोड हो रहा है...")
}

@Composable के उपयोग के उदाहरण

आइए @Composable एनोटेशन का उपयोग करके प्रोफ़ाइल स्क्रीन बनाने का एक व्यावहारिक उदाहरण देखें। यहां हम कई Composable फंक्शन के संयोजन, स्थिति और मॉडिफायर के साथ काम करने का प्रदर्शन करते हैं — किसी भी Compose लेआउट के प्रमुख तत्व।

@Composable
fun ProfileScreen(userId: String) {
    var isFollowed by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        ProfileHeader(userId = userId)
        Spacer(modifier = Modifier.height(16.dp))
        StatsRow(posts = 42, followers = 1280)
        Spacer(modifier = Modifier.height(24.dp))
        FollowButton(
            isFollowed = isFollowed,
            onToggle = { isFollowed = !isFollowed }
        )
    }
}

@Composable
fun ProfileHeader(userId: String) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        AsyncImage(model = "https://example.com/avatars/$userId",
            contentDescription = "User avatar")
        Spacer(modifier = Modifier.width(12.dp))
        Text(text = "उपयोगकर्ता #$userId", style = MaterialTheme.typography.headlineMedium)
    }
}

@Composable
fun StatsRow(posts: Int, followers: Int) {
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        StatItem("Posts", posts)
        StatItem("Followers", followers)
    }
}

@Composable
fun StatItem(label: String, value: Int) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "$value", style = MaterialTheme.typography.headlineSmall)
        Text(text = label, style = MaterialTheme.typography.bodySmall)
    }
}

उदाहरण में, प्रत्येक Composable फंक्शन स्क्रीन के अपने हिस्से के लिए जिम्मेदार है: ProfileScreen समग्र स्थिति और चाइल्ड फंक्शन की संरचना का प्रबंधन करता है, ProfileHeader अवतार और नाम प्रदर्शित करता है, और StatsRow सांख्यिकी ब्लॉक दिखाता है। यह दृष्टिकोण एकल जिम्मेदारी सिद्धांत का पालन करता है और घटक पुन: उपयोग को सरल बनाता है।

Composable फंक्शन के प्रकार और उनका उद्देश्य

Jetpack Compose में Composable फंक्शन के तीन मुख्य प्रकार हैं। पहला प्रकार — कंटेनर (Row, Column, Box, LazyColumn) — चाइल्ड तत्वों के लेआउट को निर्धारित करते हैं। दूसरा प्रकार — प्रदर्शन तत्व (Text, Image, Icon, Button) — विशिष्ट UI घटकों को रेंडर करते हैं। तीसरा प्रकार — कस्टम Composable फंक्शन — अंतर्निहित घटकों को पुन: प्रयोज्य ब्लॉक में जोड़ते हैं।

कंटेनर सामान्य तत्वों से भिन्न होते हैं क्योंकि वे content लैम्ब्डा स्वीकार करते हैं — @Composable () -> Unit प्रकार का अंतिम पैरामीटर। यह तंत्र नेस्टेड UI ट्री बनाने की अनुमति देता है: प्रत्येक कंटेनर अपने स्वयं के संदर्भ और मेमोरी क्षेत्र के साथ एक चाइल्ड संरचना उत्पन्न करता है।

कस्टम Composable फंक्शन दो उपप्रकारों में विभाजित होते हैं: स्मार्ट (smart) और डंब (dumb)। स्मार्ट फंक्शन स्थिति और तर्क का प्रबंधन करते हैं — उनमें remember, LaunchedEffect और अन्य Compose API के कॉल होते हैं। डंब फंक्शन पैरामीटर के माध्यम से सभी डेटा प्राप्त करते हैं और केवल उसे प्रदर्शित करते हैं। स्मार्ट और डंब घटकों में विभाजन परीक्षण क्षमता और कोड पुन: उपयोग में सुधार करता है।

@Composable और घटक पुन: उपयोग

@Composable एनोटेशन का मुख्य लाभ बिना वंशानुक्रम और जटिल वर्ग पदानुक्रम के पुन: प्रयोज्य UI घटक बनाने की क्षमता है। View सिस्टम के विपरीत, जहां प्रत्येक कस्टम तत्व के लिए कंस्ट्रक्टर के साथ Java क्लास बनाने की आवश्यकता होती थी, Composable घटक केवल पैरामीटर के साथ एक Kotlin फंक्शन है।

पुन: उपयोग सुनिश्चित करने के लिए Slot API पैटर्न का उपयोग किया जाता है, जहां Composable फंक्शन अपने लेआउट के विभिन्न क्षेत्रों के लिए content लैम्ब्डा स्वीकार करता है। उदाहरण के लिए, Card घटक शीर्षक, मुख्य भाग और पाद लेख के लिए अलग-अलग सामग्री स्वीकार कर सकता है, जो इसे एप्लिकेशन की किसी भी स्क्रीन के लिए सार्वभौमिक बनाता है।

मॉडिफायर (Modifier) पुन: उपयोग में महत्वपूर्ण भूमिका निभाते हैं: वे घटक को बदले बिना पैडिंग, आकार, क्लिक और एनिमेशन कॉन्फ़िगर करने की अनुमति देते हैं। Modifier को डिफ़ॉल्ट मान के साथ Composable फंक्शन के पैरामीटर के रूप में हमेशा पास करने की अनुशंसा की जाती है: Modifier = Modifier — यह Google की आधिकारिक लाइब्रेरी में अपनाई गई मानक प्रथा है।

@Composable
fun SectionCard(
    modifier: Modifier = Modifier,
    title: String,
    content: @Composable () -> Unit
) {
    Card(modifier = modifier) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.height(8.dp))
            content()
        }
    }
}

Slot API की बदौलत, SectionCard घटक का उपयोग विभिन्न स्क्रीन पर विभिन्न सामग्री — फॉर्म, सूचियां, टेक्स्ट ब्लॉक — के साथ किया जा सकता है। मॉडिफायर और Slot API का संयोजन Compose घटकों को Kotlin द्वारा प्रदान की गई टाइप सुरक्षा खोए बिना अत्यधिक लचीला बनाता है।