Jetpack Compose Glimmer में सर्फ़ेस

XR डिवाइसों के लिए ज़रूरी शर्तें

इस गाइड से, आपको इन XR डिवाइसों के लिए अनुभव बनाने में मदद मिलती है.

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

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

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

सरफ़ेस, इन विज़ुअल और फ़िज़िकल प्रॉपर्टी के लिए ज़िम्मेदार होती है:

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

उदाहरण: सरफ़ेस बनाना

यहां दिए गए कोड से, क्लिपिंग, बैकग्राउंड, और डिफ़ॉल्ट बॉर्डर वाली एक सरफ़ेस बनती है:

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}
SurfaceSamples.kt

Interaction and Focus

Surfaces aren't focusable by default, so users can't interact with them. In most cases, surfaces should be interactive to let users consistently move focus and navigate between components. You can use the Compose focusable modifer for surfaces that are only intended to be focusable, or the Compose clickable modifer and other modifiers for surfaces that require actions.

You can create a focusable surface by combining a surface modifier with the focusable modifier:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to focusable to make sure that
                // surface appears focused when interacted with.
                interactionSource = interactionSource
            )
            .focusable(interactionSource = interactionSource)
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a focusable surface")
    }
}
SurfaceSamples.kt

Key points about the code

• Shared interaction source: Both .surface() and .focusable() must share the same interactionSource. This lets the surface react to focus changes.

Similarly, you can create a clickable surface:

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to clickable to make sure that
                // surface appears focused and pressed when interacted with
                interactionSource = interactionSource
            )
            .clickable(interactionSource = interactionSource, onClick = {})
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a clickable surface")
    }
}
SurfaceSamples.kt

कोड के बारे में अहम बातें

• शेयर किया गया इंटरैक्शन सोर्स : .surface() और .clickable() को एक ही interactionSource शेयर करना होगा. इससे यह पक्का होता है कि विज़ुअल स्थितियां (जैसे, दबाना या फ़ोकस करना) सिंक हो जाएं. इससे, सरफ़ेस उपयोगकर्ता के इनपुट पर विज़ुअल तरीके से प्रतिक्रिया दे पाती है.

• मॉडिफ़ायर का क्रम: मॉडिफ़ायर का क्रम अहम होता है. ऐसा इसलिए, क्योंकि .surface() एक लेआउट को क्लिप करता है. इसलिए, इसे पहले .clickable() से पहले रखने पर, यह पक्का होता है कि टच टारगेट, सरफ़ेस की शेप तक ही सीमित रहे. अगर .clickable() पहले आता है, तो इंटरैक्शन एरिया, कॉम्पोनेंट की दिखने वाली, क्लिप की गई बाउंड्री से बाहर भी जा सकता है.

SurfaceDepthEffect

The SurfaceDepthEffect क्लास, शैडो के ट्रांज़िशन को इंटरैक्शन की स्थितियों के बीच मैनेज करती है:

• depthEffect: जब सरफ़ेस अपनी डिफ़ॉल्ट स्थिति में होती है, तब इस्तेमाल किया जाने वाला शैडो इफ़ेक्ट.
• focusedDepthEffect: जब सरफ़ेस फ़ोकस की जाती है, तब इस्तेमाल किया जाने वाला शैडो इफ़ेक्ट.