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) }
    }
}

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

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

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

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

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

@Composable
fun CustomShapesSample() {
    val customShapes = GlimmerTheme.shapes.copy(
        small = RoundedCornerShape(12.dp),
        medium = RoundedCornerShape(20.dp)
    )

    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = customShapes.small),
        contentAlignment = Alignment.Center,
    ) {
        Text("custom small")
    }
}
ShapesSamples.kt

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

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