Jetpack Compose: मूल बातें, Composable फ़ंक्शन और State

Jetpack Compose क्या है?

Jetpack Compose Google का UI फ्रेमवर्क है जो रिएक्टिव प्रोग्रामिंग सिद्धांतों पर बनाया गया है। Activity के साथ XML लेआउट, FragmentManager और ViewBinding के बजाय, डेवलपर @Composable एनोटेशन के साथ Kotlin फ़ंक्शन के माध्यम से इंटरफ़ेस का वर्णन करता है। Compose LayoutInflater का उपयोग नहीं करता — UI शुद्ध Kotlin फ़ंक्शन हैं जो बाइटकोड में कंपाइल होते हैं। फ्रेमवर्क कई लाइब्रेरीज़ से बना है: Compose UI (मूल घटक Text, Button, Column, Row), Compose Foundation (Material Design, Gestures, Focus), Compose Material3 (Material You with Dynamic Colors) और Compose Runtime (State, Side Effects, Coroutines)। Compose Android API 21+ (Android 5.0) पर काम करता है और ComposeView — एक AndroidView एडॉप्टर के माध्यम से मौजूदा View/XML कोड के साथ पूरी तरह से संगत है।

Compose बनाम View System

View System (2008) मैन्युअल प्रबंधन के साथ View ऑब्जेक्ट्स के पदानुक्रम का उपयोग करता है: डेवलपर XML लेआउट बनाता है, findViewById के माध्यम से Views ढूंढता है, RecyclerView के लिए Adapter लागू करता है और डेटा बदलने पर notifyDataSetChanged कॉल करता है। Compose UI को कार्यात्मक रूप से वर्णित करता है: जब स्थिति बदलती है, फ्रेमवर्क केवल बदले हुए Composable फ़ंक्शन को पुनः चलाता (recompose) है, diff की गणना करता है और Canvas में न्यूनतम परिवर्तन लागू करता है। Compose का प्रदर्शन View System के बराबर है, और जटिल सूचियों (LazyColumn) वाले परिदृश्यों में key पैरामीटर के माध्यम से अनावश्यक तत्वों को छोड़कर यह अक्सर RecyclerView से बेहतर प्रदर्शन करता है। IT Sectr में, Compose का उपयोग minSdk 24+ वाले Android एप्लिकेशन के नए मॉड्यूल के लिए किया जाता है।

Composable फ़ंक्शन: UI के निर्माण खंड

@Composable — एक एनोटेशन जो सामान्य Kotlin फ़ंक्शन को UI निर्माण खंड में बदल देता है। Composable फ़ंक्शन अन्य Composable फ़ंक्शन को कॉल कर सकते हैं, जिससे घटकों का एक पेड़ बनता है। View के विपरीत, Composable फ़ंक्शन में डिफ़ॉल्ट रूप से कोई स्थिति नहीं होती — वे स्टेटलेस होते हैं और इनपुट पैरामीटर या State में प्रत्येक परिवर्तन पर दोबारा खींचे जाते हैं। Compose Compiler @Composable फ़ंक्शन को ऐसे कोड में बदल देता है जिसे बीच में रोका और फिर से शुरू किया जा सकता है (positional memoization) — यह Compose को पेड़ को पूरी तरह से पुनर्निर्माण किए बिना केवल बदले हुए भागों को पुनः आरंभ करने की अनुमति देता है।

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

UserProfile फ़ंक्शन name और avatarUrl को पैरामीटर के रूप में लेता है, एक अवतार और नाम के साथ एक पंक्ति बनाता है। Modifier.fillMaxWidth() घटक को पूरी चौड़ाई में फैलाता है, .padding(16.dp) पैडिंग जोड़ता है। MaterialTheme.typography.titleMedium सिस्टम Material 3 शैली का उपयोग करता है। जब name या avatarUrl पैरामीटर बदलते हैं, Compose UserProfile को पुनः शुरू करता है — नए मानों के साथ घटक का पुनर्निर्माण।

Jetpack Compose में State और Recomposition

State Compose में कोई भी मान है जिसके बदलने से निर्भर @Composable फ़ंक्शन का पुनर्संयोजन (पुनः आरंभ) होता है। मूल तरीका है mutableStateOf(), जो Compose की स्नैपशॉट प्रणाली के समर्थन के साथ MutableState<T> बनाता है। स्नैपशॉट परिवर्तन ट्रैकिंग तंत्र है: State में लिखने पर, Compose वर्तमान स्नैपशॉट को गंदा (dirty) चिह्नित करता है, और पुनर्संयोजन शेड्यूलर केवल उन Composable फ़ंक्शन को पुनः आरंभ करता है जो उस State को पढ़ रहे हैं। देखने योग्य संग्रहों के लिए mutableStateListOf() और mutableStateMapOf() का उपयोग करें। Compose Kotlin Flow के लिए collectAsState() और LiveData के लिए observeAsState() के माध्यम से Lifecycle-Aware घटकों से State का समर्थन करता है।

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

कोड mutableStateOf() के माध्यम से संग्रहीत liked (Boolean) और count (Int) स्थिति के साथ एक "Like" बटन बनाता है। दबाने पर, liked उल्टा हो जाता है और काउंटर बढ़/घट जाता है — Compose स्वचालित रूप से LikeButton को पुनः शुरू करता है। by डेलीगेट State को सामान्य चर की तरह उपयोग करने की अनुमति देता है: liked = !liked बजाय liked.value = !liked.value। बटन का रंग प्राथमिक (पसंद किया गया) और surfaceVariant (पसंद नहीं किया गया) के बीच प्रतिक्रियाशील रूप से बदलता है।

remember: पुनर्संयोजन के बीच कैशिंग

remember — एक Compose फ़ंक्शन जो पुनर्संयोजनों के बीच मान को कैश करता है। remember के बिना, Composable फ़ंक्शन का प्रत्येक पुनः आरंभ एक नई स्थिति (mutableStateOf) बनाता है — यह एप्लिकेशन तर्क को तोड़ता है: स्क्रीन रोटेशन या पैरेंट State परिवर्तन पर, काउंटर रीसेट हो जाता है। remember एक कैलकुलेटर लैम्ब्डा लेता है और केवल पहली संरचना पर मान की गणना करता है; बाद की संरचनाओं पर कैश किया गया परिणाम लौटाता है। कैश रीसेट करने के लिए remember(key) का उपयोग करें — कुंजी निर्धारित करती है कि मान की पुनर्गणना कब करनी है। remember(key1, key2) किसी भी कुंजी के बदलने पर पुनर्गणना करता है। लंबे समय तक रहने वाली स्थितियों (स्क्रीन रोटेशन से बचने वाली) के लिए rememberSaveable का उपयोग करें — SavedStateHandle के माध्यम से Bundle में सहेजने के साथ remember का एनालॉग।

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Elapsed: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable स्क्रीन रोटेशन (कॉन्फ़िगरेशन परिवर्तन) पर seconds को संरक्षित करता है। LaunchedEffect एक कोरूटीन शुरू करता है जो हर सेकंड seconds बढ़ाता है। TimerScreen के पुनर्संयोजन (हर सेकंड) पर rememberSaveable के कारण seconds रीसेट नहीं होता। सामान्य remember का उपयोग उस स्थिति के लिए करें जो कॉन्फ़िगरेशन परिवर्तनों से नहीं बचनी चाहिए (उदाहरण के लिए, एनिमेशन फ़्लैग)।

Modifier: Composable सेटिंग्स की श्रृंखला

Modifier — एक अपरिवर्तनीय कंटेनर ऑब्जेक्ट जो Composable घटकों के स्वरूप, व्यवहार और लेआउट को कॉन्फ़िगर करने के लिए Builder पैटर्न को लागू करता है। Modifier विधि का प्रत्येक कॉल (.padding(), .width(), .clickable(), .background()) जोड़े गए तत्व के साथ एक नया Modifier लौटाता है। मॉडिफ़ायर क्रम मायने रखता है: .padding(16.dp).clickable { } — पैडिंग क्लिक हैंडलर से पहले लागू होती है, clickable पैडिंग सहित पूरे क्षेत्र को ट्रैक करता है। .clickable { }.padding(16.dp) — पैडिंग से पहले का पूरा क्षेत्र क्लिक करने योग्य है, पैडिंग सामग्री को अंदर की ओर खिसका देती है। Modifier then(otherModifier) और पैरेंट सेटिंग्स तक पहुंचने के लिए compositionLocal के माध्यम से कस्टम कार्यान्वयन का समर्थन करता है।

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Card clicked") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "Android के लिए State और Modifier के साथ घोषणात्मक UI",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample Modifier श्रृंखला प्रदर्शित करता है: fillMaxWidth + padding + clickable। Card अपनी खुद की elevation और colors सेटिंग्स के साथ एक Material3 घटक है। नेस्टेड Column में 16dp की आंतरिक पैडिंग है। Compose Material3 Android 12+ पर Dynamic Color (Material You) के लिए स्वचालित रूप से रंगों को अनुकूलित करता है। Card Compose में 30+ अंतर्निहित Material3 घटकों में से एक है।

State hoisting और Compose आर्किटेक्चर

State hoisting — स्थिति को Composable फ़ंक्शन से उसके कॉलर में ऊपर उठाने का पैटर्न, फ़ंक्शन को स्टेटलेस बनाता है। एक स्टेटलेस घटक State को स्वयं धारण किए बिना पैरामीटर के माध्यम से डेटा और कॉलबैक प्राप्त करता है। यह पुन: प्रयोज्यता और परीक्षण क्षमता में सुधार करता है: घटक को विभिन्न States के साथ बुलाया जा सकता है और preview में परीक्षण किया जा सकता है। Google आर्किटेक्चर की सिफारिश करता है: ViewModel + StateFlow (या MutableStateFlow) + Compose में collectAsState()। ViewModel स्थिति को स्क्रीन स्तर तक उठाता है, Compose इसे रेंडर करता है। साइड-इफ़ेक्ट (LaunchedEffect, DisposableEffect) एक-बार की घटनाओं को संभालते हैं।