Scaffold
मटीरियल डिज़ाइन में, स्कैफ़ोल्ड एक बुनियादी स्ट्रक्चर है, जो जटिल यूज़र इंटरफ़ेस के लिए स्टैंडर्ड प्लैटफ़ॉर्म. यह अलग-अलग चीज़ों को साथ रखता है ऐप्लिकेशन बार और फ़्लोटिंग ऐक्शन बटन जैसे यूज़र इंटरफ़ेस (यूआई) के हिस्से, जो ऐप्लिकेशन को आसानी से ऐक्सेस किया जा सकता है.
उदाहरण
Scaffold कंपोज़ेबल, एक आसान एपीआई उपलब्ध कराता है. इससे,
मटीरियल डिज़ाइन दिशा-निर्देशों के हिसाब से अपने ऐप्लिकेशन के स्ट्रक्चर को तेज़ी से इकट्ठा करने में मदद करता है.
Scaffold, पैरामीटर के तौर पर कई कंपोज़ेबल को स्वीकार करता है. इनमें वे
फ़ॉलो किया जा रहा है:
topBar: स्क्रीन पर सबसे ऊपर मौजूद ऐप्लिकेशन बार.bottomBar: स्क्रीन के सबसे नीचे मौजूद ऐप्लिकेशन बार.floatingActionButton: एक बटन जो इसके नीचे दाएं कोने पर घूमता है वह स्क्रीन जिसका इस्तेमाल करके मुख्य कार्रवाइयों को दिखाया जा सकता है.
ऊपर और नीचे, दोनों को लागू करने के तरीके के बारे में ज़्यादा जानकारी वाले उदाहरणों के लिए तो आपको ऐप्लिकेशन बार पेज दिखेगा.
दूसरे कंटेनर की तरह, Scaffold कॉन्टेंट को भी पास किया जा सकता है. यह बीत जाता है
content Lambda फ़ंक्शन के लिए innerPadding वैल्यू, जिसे चाइल्ड में इस्तेमाल किया जा सकता है
कंपोज़ेबल.
नीचे दिए गए उदाहरण में पूरा उदाहरण दिया गया है कि आपकी वेबसाइट के लिए
Scaffold. इसमें सबसे ऊपर मौजूद ऐप्लिकेशन बार, बॉटम ऐप्लिकेशन बार, और फ़्लोट करने वाली कार्रवाई शामिल है
यह बटन, Scaffold के इंटरनल स्टेटस से इंटरैक्ट करता है.
@Composable
fun ScaffoldExample() {
var presses by remember { mutableIntStateOf(0) }
Scaffold(
topBar = {
TopAppBar(
colors = topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text("Top app bar")
}
)
},
bottomBar = {
BottomAppBar(
containerColor = MaterialTheme.colorScheme.primaryContainer,
contentColor = MaterialTheme.colorScheme.primary,
) {
Text(
modifier = Modifier
.fillMaxWidth(),
textAlign = TextAlign.Center,
text = "Bottom app bar",
)
}
},
floatingActionButton = {
FloatingActionButton(onClick = { presses++ }) {
Icon(Icons.Default.Add, contentDescription = "Add")
}
}
) { innerPadding ->
Column(
modifier = Modifier
.padding(innerPadding),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Text(
modifier = Modifier.padding(8.dp),
text =
"""
This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.
It also contains some basic inner content, such as this text.
You have pressed the floating action button $presses times.
""".trimIndent(),
)
}
}
}
यह लागू होने का तरीका इस तरह दिखता है:
