Jetpack Compose Glimmer में शेप

इन XR डिवाइस पर काम करने वाले ऐप्लिकेशन बनाए जा सकते हैं

इस गाइड की मदद से, इन XR डिवाइस के लिए ऐप्लिकेशन बनाए जा सकते हैं.

XR डिवाइस के टाइप के बारे में जानें →

XR डिवाइस के टाइप के बारे में जानें →

Jetpack Compose Glimmer में, सर्फ़ेस अपनी विज़ुअल बाउंड्री और राउंडनेस तय करने के लिए, शेप का इस्तेमाल करती हैं. Shapes क्लास, अलग-अलग तरह के कॉम्पोनेंट के लिए, अलग-अलग लेवल की राउंडनेस उपलब्ध कराती है.

शेप की कैटगरी

The GlimmerTheme क्लास, शेप के तीन स्टैंडर्ड साइज़ तय करती है:

• छोटा: ऐसा शेप जिसके चारों कोने एक ही साइज़ के हों. इसका इस्तेमाल, कार्ड जैसे कॉम्पोनेंट के लिए किया जाता है. डिफ़ॉल्ट रूप से, यह 24.dp का RoundedCornerShape होता है.
• मीडियम: ऐसा शेप जिसके चारों कोने एक ही साइज़ के हों और जिनका साइज़, छोटे और बड़े के बीच का हो. यह सबसे ज़्यादा इस्तेमाल किया जाने वाला शेप है और सर्फ़ेस में डिफ़ॉल्ट रूप से इसका इस्तेमाल किया जाता है. डिफ़ॉल्ट रूप से, यह 36.dp का RoundedCornerShape होता है.
• बड़ा: ऐसा शेप जिसके चारों कोने पूरी तरह से राउंड हों. इस शेप का इस्तेमाल, बटन जैसे कॉम्पोनेंट के लिए किया जाता है. डिफ़ॉल्ट रूप से, यह CircleShape होता है.

उदाहरण: GlimmerTheme से शेप पाना और उन्हें कॉम्पोनेंट पर लागू करना

सबसे पहले, GlimmerTheme.shapes से तय किए गए शेप पाएं:

@Composable
fun ShapesSample() {
    val shapes = GlimmerTheme.shapes
    GlimmerLazyColumn {
        item { ShapeItem("small", shape = shapes.small) }
        item { ShapeItem("medium", shape = shapes.medium) }
        item { ShapeItem("large", shape = shapes.large) }
    }
}
ShapesSamples.kt

इसके बाद, इन शेप को कुछ कॉम्पोनेंट पर लागू किया जा सकता है:

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    Box(
        modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}
ShapesSamples.kt

शेप को पसंद के मुताबिक बनाना

Shapes क्लास, @Immutable होती है. मौजूदा थीम के शेप की कॉपी बनाई जा सकती है और कॉपी फ़ंक्शन का इस्तेमाल करके, खास वैल्यू को बदला जा सकता है. ऐसा करके, थीम की संरचना को बनाए रखा जा सकता है. साथ ही, अपने ऐप्लिकेशन के ब्रैंड के लिए, खास रेडियस को अडजस्ट किया जा सकता है.

उदाहरण: शेप की खास वैल्यू को बदलना

यहां दिया गया कोड, शेप की खास वैल्यू को बदलता है:

val customShapes = GlimmerTheme.shapes.copy(
    small = RoundedCornerShape(12.dp),
    medium = RoundedCornerShape(20.dp)
)

डिफ़ॉल्ट वैल्यू

अगर GlimmerTheme में कोई वैल्यू तय नहीं की गई है, तो सिस्टम डिफ़ॉल्ट रूप से इन वैल्यू का इस्तेमाल करता है: