Scaffold

मटीरियल डिज़ाइन में, स्कैफ़ोल्ड एक बुनियादी स्ट्रक्चर है. यह मुश्किल यूज़र इंटरफ़ेस के लिए, एक स्टैंडर्ड प्लैटफ़ॉर्म उपलब्ध कराता है. यह यूज़र इंटरफ़ेस (यूआई) के अलग-अलग हिस्सों को एक साथ रखता है. जैसे, ऐप्लिकेशन बार और फ़्लोट करने वाले कार्रवाई बटन. इससे ऐप्लिकेशन को एक जैसा लुक और स्टाइल मिलता है.

उदाहरण

Scaffold कंपोज़ेबल, एक आसान एपीआई उपलब्ध कराता है. इसका इस्तेमाल करके, मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक, अपने ऐप्लिकेशन के स्ट्रक्चर को तुरंत असेंबल किया जा सकता है. Scaffold, पैरामीटर के तौर पर कई कंपोज़ेबल स्वीकार करता है. इनमें ये शामिल हैं:

  • topBar: स्क्रीन पर सबसे ऊपर मौजूद ऐप्लिकेशन बार.
  • bottomBar: स्क्रीन पर सबसे नीचे मौजूद ऐप्लिकेशन बार.
  • floatingActionButton: यह स्क्रीन के सबसे नीचे दाएं कोने में मौजूद एक बटन होता है. इसका इस्तेमाल करके, मुख्य कार्रवाइयां देखी जा सकती हैं.

Scaffold कॉन्टेंट को भी पास किया जा सकता है, ठीक वैसे ही जैसे अन्य कंटेनर में किया जाता है. यह PaddingValues को content लैम्डा में पास करता है. आपको इसे अपने कॉन्टेंट के रूट कंपोज़ेबल पर लागू करना चाहिए, ताकि इसके साइज़ को सीमित किया जा सके.

यहां दिए गए उदाहरण में, 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(),
            )
        }
    }
}

लागू होने पर यह इस तरह दिखता है:

स्कैफ़ोल्ड को लागू करने का एक उदाहरण. इसमें टॉप और बॉटम ऐप्लिकेशन बार के साथ-साथ, फ़्लोट करने वाला कार्रवाई बटन भी शामिल है. यह बटन, काउंटर को दोहराता है. स्कैफ़ोल्ड के अंदर मौजूद कॉन्टेंट, सामान्य टेक्स्ट होता है. इसमें कॉम्पोनेंट के बारे में बताया जाता है.
पहली इमेज. स्कैफ़ोल्ड को लागू करने का तरीका.

अन्य संसाधन