मोबाइल डेवलपमेंट में Jetpack Compose: यह क्या है, मुख्य अवधारणाएँ और यह कैसे काम करता है

Jetpack Compose मूल बातें (@Composable, Composition, Recomposition)

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

Recomposition

Recomposition — स्थिति बदलने पर Composable फ़ंक्शन का पुनरारंभ। Compose ट्रैक करता है कि प्रत्येक फ़ंक्शन में कौन सी स्थितियाँ पढ़ी जाती हैं। जब कोई स्थिति बदलती है, Compose केवल उन फ़ंक्शन को पुनरारंभ करता है जो उस स्थिति को पढ़ते हैं (Smart Recomposition)। Recomposition आशावादी है: कई बार चल सकता है, इसलिए फ़ंक्शन शुद्ध होने चाहिए (बिना साइड इफ़ेक्ट के)। साइड इफ़ेक्ट LaunchedEffect या DisposableEffect में जाते हैं। Composable फ़ंक्शन suspend नहीं हो सकते। वे अन्य Composable फ़ंक्शन से कॉल किए जाते हैं। कॉल क्रम गारंटीड नहीं है (Compose पुनर्क्रमित कर सकता है)।

// State Hoisting और LazyColumn के साथ Composable उदाहरण
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — घोषणात्मक ट्री। Recomposition — स्मार्ट पुनरारंभ। IT Sectr टाइप स्थिरता की निगरानी करने की सलाह देता है — अस्थिर प्रकार अत्यधिक पुनर्रचना का कारण बनते हैं।

CompositionLocal

CompositionLocal — Compose में अंतर्निहित डेटा पासिंग। SwiftUI में @Environment के समान। CompositionLocalProvider — मान सेट करना। current — पढ़ना। इसके लिए उपयोग किया जाता है: Theme (MaterialTheme), ContentScale, Density। Static CompositionLocal — बिना बदलाव के कॉन्फ़िगरेशन के लिए। Dynamic CompositionLocal — परिवर्तनीय मानों (थीम) के लिए। IT Sectr वैश्विक कॉन्फ़िगरेशन के लिए CompositionLocal और डेटा के लिए स्पष्ट पैरामीटर का उपयोग करने की सलाह देता है।

स्थिति (remember, mutableStateOf, State Hoisting)

remember — पुनर्रचना के बीच मान संरक्षित करता है। mutableStateOf — देखने योग्य स्थिति बनाता है (MutableState<T>)। बदलने पर, पुनर्रचना को ट्रिगर करता है। State Hoisting — पैटर्न: स्थिति पैरेंट घटक में उठाई जाती है, चाइल्ड को मान + कॉलबैक प्राप्त होता है। State (अपरिवर्तनीय) — केवल पढ़ना। MutableState — पढ़ना + लिखना। rememberSaveable — रोटेशन/प्रोसेस डेथ के दौरान संरक्षित रहता है।

State Hoisting

State Hoisting — सिद्धांत: state down, events up। स्थिति पैरेंट में संग्रहीत होती है और पैरामीटर के माध्यम से चाइल्ड घटकों को पास की जाती है। चाइल्ड घटक लैम्ब्डा (कॉलबैक) के माध्यम से परिवर्तनों की रिपोर्ट करते हैं। लाभ: पुन: प्रयोज्यता, परीक्षण क्षमता, सत्य का एकल स्रोत। उदाहरण: MyTextField अपनी स्थिति संग्रहीत करने के बजाय, पैरेंट स्ट्रिंग संग्रहीत करता है और इसे value + onValueChange के माध्यम से पास करता है।

व्युत्पन्न स्थिति

derivedStateOf — गणना की गई स्थिति, केवल निर्भरता बदलने पर पुनर्गणना होती है। फ़िल्टरिंग, रूपांतरण, सत्यापन के लिए उपयोग किया जाता है। snapshotFlow — State को Flow में बदलता है। प्रतिक्रियाशील श्रृंखलाओं के लिए उपयोग किया जाता है। collectAsState — Composable के अंदर Flow को State में एकत्र करता है। IT Sectr गणना मानों के लिए derivedStateOf और State को coroutines से जोड़ने के लिए snapshotFlow का उपयोग करने की सलाह देता है।

कंटेनर (Column, Row, Box, LazyColumn)

Column — ऊर्ध्वाधर लेआउट (LinearLayout vertical के समान)। Row — क्षैतिज लेआउट। Box — स्टैकिंग लेआउट (FrameLayout के समान)। LazyColumn — आलसी लोडिंग के साथ ऊर्ध्वाधर स्क्रॉल करने योग्य सूची। LazyRow — क्षैतिज स्क्रॉल करने योग्य सूची। Scaffold — मुख्य स्क्रीन ढाँचा: TopAppBar, BottomBar, FloatingActionButton, Snackbar। TopAppBar — शीर्ष पट्टी। BottomNavigation — निचला नेविगेशन (Material 3 में NavigationBar)। Modifier — श्रृंखला: .fillMaxWidth().padding(8.dp).clickable { }। मॉडिफ़ायर क्रम महत्वपूर्ण है — प्रत्येक एक नया रैपर बनाता है।

LazyColumn अनुकूलन

LazyColumn — वर्चुअलाइज़्ड सूची। केवल दृश्य तत्व प्रस्तुत करता है। अनुकूलन: 1) key — आइटम के लिए अद्वितीय कुंजी, 2) contentType — आइटम को प्रकार के अनुसार समूहित करें, 3) itemContent — आइटम के अंदर पुनर्रचना कम करें, 4) LazyVerticalGrid / LazyHorizontalGrid — ग्रिड के लिए। LazyLayout — कस्टम आलसी लेआउट। Paging 3 + Compose — collectAsLazyPagingItems के माध्यम से पेजिनेशन। IT Sectr पूर्वानुमानित पुनर्रचना के लिए सभी LazyColumn के लिए key(item) की सलाह देता है।

नेविगेशन (NavController, NavHost)

Navigation Compose — नेविगेशन लाइब्रेरी। NavController — गंतव्य स्टैक प्रबंधित करता है। NavHost — नेविगेशन ग्राफ़ के लिए कंटेनर। composable("route") — गंतव्य पंजीकृत करें। navController.navigate("route") — नेविगेट करें। popBackStack() — वापस जाएँ। तर्क: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType }))। intentFilter के माध्यम से डीप लिंकिंग। BottomNavigation — NavController के साथ एकीकरण: NavBarItem → navigate + popUpTo।

उन्नत नेविगेशन

एकाधिक बैक स्टैक — प्रत्येक BottomNavigation टैब के लिए अलग बैक स्टैक। SavedStateHandle — प्रोसेस डेथ के दौरान तर्क संरक्षित करें। NavArgs — टाइप-सुरक्षित तर्क (Kotlin 2.0+). डीप लिंक — बाहरी लिंक के लिए URL स्कीम। पूर्वानुमानित बैक जेस्चर (Android 14+) — पूर्वावलोकन के साथ बैक जेस्चर समर्थन। IT Sectr टाइप सुरक्षा के लिए NavArgs और BottomNavigation के लिए एकाधिक बैक स्टैक का उपयोग करने की सलाह देता है।

इफ़ेक्ट (LaunchedEffect, DisposableEffect)

LaunchedEffect — Composition में suspend ब्लॉक लॉन्च करता है। Composition छोड़ने पर रद्द हो जाता है। keys बदलने पर पुनरारंभ होता है। इसके लिए उपयोग किया जाता है: डेटा लोडिंग, टाइमर, एनिमेशन। DisposableEffect — उन संसाधनों के लिए जिन्हें सफ़ाई की आवश्यकता है: onDispose { } — listener से सदस्यता समाप्त करें, कनेक्शन बंद करें। SideEffect — सिंक्रोनस इफ़ेक्ट (प्रत्येक पुनर्रचना)। इसके लिए उपयोग किया जाता है: लॉगिंग, गैर-Compose कोड के साथ सिंक्रनाइज़ेशन। IT Sectr डेटा लोडिंग के लिए LaunchedEffect और सफ़ाई के लिए DisposableEffect की सलाह देता है।

Compose — फ़ंक्शन + मॉडिफ़ायर। SwiftUI — struct + मॉडिफ़ायर। अवधारणाएँ समान हैं, सिंटैक्स अलग है। IT Sectr दोनों फ्रेमवर्क सीखने की सलाह देता है — एक को समझना दूसरे को सीखना आसान बनाता है।

इफ़ेक्ट पैटर्न

rememberCoroutineScope — LaunchedEffect के बाहर CoroutineScope तक पहुँच (जैसे, बटन क्लिक पर)। snapshotFlow — श्रृंखलाओं के लिए State को Flow में बदलें। produceState — गैर-Compose स्रोत को State में बदलें। animateFloatAsState और animateColorAsState — इफ़ेक्ट के माध्यम से एनिमेशन। IT Sectr UI इवेंट के लिए rememberCoroutineScope और स्वचालित लोडिंग के लिए LaunchedEffect की सलाह देता है।

थीमिंग (MaterialTheme, Material3)

MaterialTheme — वैश्विक Compose थीम। रंग, टाइपोग्राफी, आकार। MaterialTheme { } — पूरे ऐप को लपेटता है। Material3 (M3) — Google डिज़ाइन सिस्टम 2023+। Dynamic Colors — वॉलपेपर के अनुकूलन (Android 12+). TextStyle — टेक्स्ट कॉन्फ़िगरेशन: fontSize, fontWeight, lineHeight। Shape — कोनों को गोल करना। Elevation — छायाएँ। IT Sectr डिफ़ॉल्ट रूप से Material3 और आधुनिक उपकरणों के लिए Dynamic Colors की सलाह देता है।

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

एनिमेशन (animate*, AnimatedVisibility)

animateFloatAsState — Float मान को एनिमेट करता है। animateColorAsState — रंग को एनिमेट करता है। animateDpAsState — आकार को एनिमेट करता है। AnimatedVisibility — .animateEnterExit() के साथ दिखाएँ/छिपाएँ। AnimatedContent — सामग्री बदलने पर एनिमेशन (crossfade, slide)। updateTransition — enum स्थिति पर आधारित एनिमेशन। Animatable — Animatable इंटरफ़ेस के माध्यम से कस्टम एनिमेशन। IT Sectr सूचियों के लिए AnimatedVisibility और स्क्रीन ट्रांज़िशन के लिए AnimatedContent की सलाह देता है।

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

परीक्षण (Compose UI Test)

Compose UI Test — Compose स्क्रीन का परीक्षण। createComposeRule() — JUnit नियम। setContent { } — Composable सेट करें। onNodeWithText, onNodeWithTag, onNodeWithContentDescription — तत्व खोजें। performClick, performTextInput, performScrollTo — क्रियाएँ। assertIsDisplayed, assertTextEquals — जाँच। Semantics — पहुँच और परीक्षण के लिए Semantics ट्री। IdlingResource — एसिंक्रोनस संचालन की प्रतीक्षा करें। स्क्रीनशॉट परीक्षण — Papercuts, Roborazzi। IT Sectr प्रत्येक स्क्रीन के लिए UI परीक्षण और ViewModel के लिए यूनिट परीक्षण की सलाह देता है।

WindowSizeClass — स्क्रीन आकार के अनुकूलन (Compact, Medium, Expanded)। Material3 रिस्पॉन्सिव लेआउट से संबंधित। BottomNavigation से NavigationRail में स्वचालित स्विचिंग के लिए Adaptive Navigation Suite में उपयोग किया जाता है। IT Sectr टैबलेट और डेस्कटॉप Compose अनुकूलन के लिए WindowSizeClass की सलाह देता है।

Paging 3 + Compose — Google से पेजिनेशन लाइब्रेरी। PagingData — पेज स्ट्रीम। PagingConfig — सेटिंग्स (pageSize, prefetchDistance)। collectAsLazyPagingItems() — Compose में एकत्रित करें। PagingSource — कस्टम स्रोत। RemoteMediator — हाइब्रिड लोडिंग (नेटवर्क + DB)। Paging 3 Compose में अनंत स्क्रॉल सूचियों के लिए मानक है।