Jetpack Compose में Scaffold — यह क्या है, गुण और यह कैसे काम करता है

Jetpack Compose में Scaffold क्या है

Scaffold एक composable फ़ंक्शन है जो Material Design विनिर्देश के अनुसार स्क्रीन स्कैफ़ोल्ड को लागू करता है। Scaffold पारंपरिक अर्थों में एक कंटेनर नहीं है — यह एक लेआउट प्रबंधक है जो स्क्रीन पर कई मानक Material घटकों के प्लेसमेंट का समन्वय करता है।

Scaffold TopAppBar, BottomBar और FloatingActionButton के लिए मार्जिन प्रबंधित करता है, साथ ही सिस्टम तत्वों — स्टेटस बार और नेविगेशन बार के लिए भी। यह सुनिश्चित करता है कि सामग्री सिस्टम तत्वों के साथ ओवरलैप न हो और Material Design दिशानिर्देशों का अनुपालन करे।

Material Design Guidelines, 2025 के अनुसार, Scaffold प्रत्येक ऐप स्क्रीन का मूल तत्व होना चाहिए। यह View सिस्टम से पुराने CoordinatorLayout को बदलता है और स्क्रीन लेआउट बनाने के लिए एक सरल, घोषणात्मक API प्रदान करता है।

मूल Scaffold सिग्नेचर

Scaffold पैरामीटर modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost और content स्वीकार करता है। content पैरामीटर PaddingValues प्राप्त करता है — वे मार्जिन जिन्हें मुख्य सामग्री को ध्यान में रखना चाहिए।

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("होम") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("मुख्य सामग्री")
        }
    }
}

Scaffold स्लॉट: topBar, bottomBar और floatingActionButton

topBar ऐप के शीर्ष बार को रखने का स्लॉट है, आमतौर पर TopAppBar या LargeTopAppBar। Scaffold स्वचालित रूप से सामग्री के लिए innerPadding में मार्जिन जोड़ता है ताकि वह topBar के साथ ओवरलैप न हो। TopAppBar में एक शीर्षक, नेविगेशन आइकन और क्रियाएं हो सकती हैं।

bottomBar निचले नेविगेशन बार के लिए स्लॉट है। यह BottomNavigation, BottomAppBar या NavigationBar का समर्थन करता है। सामग्री के लिए innerPadding की गणना करते समय Scaffold bottomBar की ऊंचाई को ध्यान में रखता है। Material Design Guidelines, 2025 के अनुसार, bottomBar का उपयोग 3–5 नेविगेशन बिंदुओं वाली स्क्रीन पर किया जाना चाहिए।

floatingActionButton फ्लोटिंग एक्शन बटन के लिए स्लॉट है। Scaffold स्वचालित रूप से FAB को Material Design विनिर्देश के अनुसार रखता है — सही मार्जिन के साथ निचले दाएं कोने में। floatingActionButtonPosition FAB को स्क्रीन के निचले किनारे के केंद्र में ले जाने की अनुमति देता है।

सभी स्लॉट के साथ उदाहरण

इस उदाहरण में, Scaffold सभी मुख्य स्लॉट का उपयोग करता है: शीर्षक के साथ TopAppBar, तीन नेविगेशन आइटम के साथ BottomBar और मुख्य क्रिया के लिए FloatingActionButton।

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("ऐप") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "होम") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "खोजें") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("स्क्रीन सामग्री")
        }
    }
}

ScaffoldState: Drawer और Snackbar प्रबंधन

ScaffoldState Scaffold की स्थिति वस्तु है जो DrawerState और SnackbarHostState को जोड़ती है। DrawerState साइड मेनू को खोलने और बंद करने का प्रबंधन करता है, जबकि SnackbarHostState Snackbar को प्रदर्शित और छिपाने का प्रबंधन करता है। स्थिति rememberScaffoldState() के माध्यम से बनाई जाती है और scaffoldState पैरामीटर में पास की जाती है।

DrawerState प्रोग्रामेटिक Drawer नियंत्रण के लिए open और close विधियाँ प्रदान करता है। Drawer की स्थिति खुली, बंद या आंशिक रूप से खुली हो सकती है। drawerGesturesEnabled Drawer खोलने के लिए स्वाइप जेस्चर को अक्षम करने की अनुमति देता है, केवल बटन के माध्यम से प्रोग्रामेटिक उद्घाटन छोड़कर।

SnackbarHostState Snackbar प्रबंधित करता है — स्क्रीन के निचले भाग में अस्थायी सूचनाएं। showSnackbar विधि एक संदेश और वैकल्पिक क्रिया के साथ Snackbar प्रदर्शित करती है। Material Design Guidelines, 2025 के अनुसार, Snackbar का उपयोग बिना गंभीर रूप से महत्वपूर्ण जानकारी वाले संक्षिप्त संदेशों के लिए किया जाना चाहिए।

@Composable
fun ScaffoldWithDrawer() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("मेनू") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("आइटम 1")
                Text("आइटम 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("सामग्री")
        }
    }
}

Scaffold के साथ स्क्रीन निर्माण का उदाहरण

Scaffold के साथ एक पूर्ण स्क्रीन उदाहरण में FAB दबाने पर सूचनाएं प्रदर्शित करने के लिए TopAppBar, BottomNavigation, FloatingActionButton और Snackbar शामिल हैं। स्थिति समन्वय के लिए ScaffoldState सभी घटकों को पास किया जाता है।

@Composable
fun MainScreen() {
    val state = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = state,
        topBar = {
            TopAppBar(
                title = { Text("IT Sectr") },
                actions = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Notifications, "Notifications")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(icon = { Icon(Icons.Default.Home, "होम") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "सेटिंग्स") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("हो गया")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("स्वागत है")
        }
    }
}

InnerPadding और Scaffold के साथ अनुकूली लेआउट

innerPadding वे PaddingValues हैं जो Scaffold content ब्लॉक को पास करता है। उनमें सामग्री को statusBar, navigationBar, topBar और bottomBar के साथ ओवरलैप होने से रोकने के लिए आवश्यक मार्जिन होते हैं। विभिन्न उपकरणों पर सही प्रदर्शन के लिए innerPadding का उपयोग अनिवार्य है।

Scaffold स्वचालित रूप से सिस्टम मार्जिन और स्थापित स्लॉट की ऊंचाई के आधार पर innerPadding की गणना करता है। कैमरा आइलैंड या स्क्रीन कटआउट वाले उपकरणों पर, Scaffold स्टेटस बार के लिए मार्जिन समायोजित करता है। भौतिक बटन वाले पुराने उपकरणों पर, निचला मार्जिन अनुपस्थित हो सकता है।

Android Developers, 2024 के अनुसार, innerPadding को Modifier.padding(innerPadding) के माध्यम से सामग्री के मूल कंटेनर पर लागू किया जाना चाहिए। यदि सामग्री एक स्क्रॉल करने योग्य कंटेनर का उपयोग करती है, तो innerPadding को कीबोर्ड और सिस्टम जेस्चर के सही संचालन के लिए Modifier.consumeWindowInsets के माध्यम से लागू किया जाता है।

• innerPadding को Modifier.padding(innerPadding) के माध्यम से सामग्री के मूल कंटेनर पर लागू करें
• स्क्रॉल करने योग्य कंटेनरों के लिए Modifier.consumeWindowInsets(innerPadding) का उपयोग करें
• स्टेटस बार के लिए अतिरिक्त मार्जिन न जोड़ें — Scaffold यह स्वचालित रूप से करता है
• यदि topBar या bottomBar अनुपस्थित है, तो innerPadding में संबंधित मार्जिन शून्य होंगे