Jetpack Compose Glimmer में, surface कॉम्पोनेंट एक बुनियादी
बिल्डिंग ब्लॉक है. यह बटन और कार्ड जैसे
कॉम्पोनेंट के लिए, अलग-अलग विज़ुअल एरिया या फ़िज़िकल बाउंड्री दिखाता है.
सरफ़ेस, इन विज़ुअल और फ़िज़िकल प्रॉपर्टी के लिए ज़िम्मेदार होती है:
- क्लिपिंग: अपने चाइल्ड कॉम्पोनेंट को किसी तय आकार में क्लिप करता है.
- बॉर्डर: कॉम्पोनेंट की बाउंड्री को हाइलाइट करने के लिए, एक इनर बॉर्डर बनाता है. फ़ोकस किए जाने पर, यह फ़ोकस किए गए हाइलाइट के साथ एक चौड़ा बॉर्डर बनाता है.
- बैकग्राउंड: सरफ़ेस एरिया पर बैकग्राउंड का रंग लागू करता है.
- डेप्थ इफ़ेक्ट: कॉम्पोनेंट के
स्टेटस (जैसे, डिफ़ॉल्ट बनाम फ़ोकस) के आधार पर,
DepthEffectशैडो रेंडर करता है. - कॉन्टेंट का रंग: सरफ़ेस के अंदर मौजूद टेक्स्ट और आइकॉन के लिए एक रंग उपलब्ध कराता है, यह रंग, डिफ़ॉल्ट रूप से बैकग्राउंड के रंग के हिसाब से तय होता है.
- इंटरैक्शन के स्टेटस: सरफ़ेस को दबाने पर, एक दबाया गया ओवरले बनाता है. साथ ही, फ़ोकस किए जाने पर, हाइलाइट के साथ एक चौड़ा बॉर्डर बनाता है.
उदाहरण: सरफ़ेस बनाना
यहां दिया गया कोड, क्लिपिंग, बैकग्राउंड, और डिफ़ॉल्ट बॉर्डर वाली एक सरफ़ेस बनाता है:
@Composable
fun SurfaceSample() {
Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
Text("This is a surface")
}
}
इंटरैक्शन और फ़ोकस
सरफ़ेस, डिफ़ॉल्ट रूप से फ़ोकस नहीं की जा सकती हैं. इसलिए, लोग उनसे इंटरैक्ट नहीं कर सकते. ज़्यादातर मामलों में, सरफ़ेस इंटरैक्टिव होनी चाहिए, ताकि लोग कॉम्पोनेंट के बीच फ़ोकस को लगातार मूव कर सकें और नेविगेट कर सकें. Compose के focusable मॉडिफ़ायर
का इस्तेमाल, सिर्फ़ फ़ोकस की जा सकने वाली सरफ़ेस के लिए किया जा सकता है. इसी तरह, Compose के clickable मॉडिफ़ायर का इस्तेमाल करके, क्लिक की जा सकने वाली सरफ़ेस बनाई जा सकती है. ऐसी सरफ़ेस के लिए अन्य मॉडिफ़ायर का भी इस्तेमाल किया जा सकता है जिन पर कार्रवाई की जा सकती है.
यहां दिए गए कोड में, फ़ोकस की जा सकने वाली और क्लिक की जा सकने वाली, दोनों तरह की सरफ़ेस के उदाहरण दिखाए गए हैं:
@Composable fun FocusableSurfaceSample() { val interactionSource = remember { MutableInteractionSource() } Box( modifier = Modifier .size(100.dp) .surface(interactionSource = interactionSource) .focusable(interactionSource = interactionSource), contentAlignment = Alignment.Center ) { Text("Focusable") } } @Composable fun ClickableSurfaceSample() { val interactionSource = remember { MutableInteractionSource() } Box( modifier = Modifier .size(100.dp) .surface(interactionSource = interactionSource) .focusable(interactionSource = interactionSource) .clickable( interactionSource = interactionSource, indication = null ) { /* Handle click action */ }, contentAlignment = Alignment.Center ) { Text("Clickable") } }
कोड के बारे में अहम बातें
फ़ोकस की जा सकने वाली सरफ़ेस के लिए, शेयर किया गया इंटरैक्शन सोर्स:
.surface()और.focusable(), दोनों को एक हीinteractionSourceशेयर करना होगा. इससे सरफ़ेस, फ़ोकस में होने वाले बदलावों पर प्रतिक्रिया दे पाती है.क्लिक की जा सकने वाली सरफ़ेस के लिए, शेयर किया गया इंटरैक्शन सोर्स:
.surface()और.clickable(), दोनों को एक हीinteractionSourceशेयर करना होगा. इससे यह पक्का होता है कि विज़ुअल स्टेटस (जैसे, दबाना या फ़ोकस करना) सिंक हो जाएं. साथ ही, सरफ़ेस, उपयोगकर्ता के इनपुट पर विज़ुअल तौर पर प्रतिक्रिया दे पाए.मॉडिफ़ायर का क्रम: मॉडिफ़ायर का क्रम अहम होता है.
.surface()किसी लेआउट को क्लिप करता है. इसलिए, इसे.clickable()से पहले रखने पर, यह पक्का होता है कि टच टारगेट, सरफ़ेस के आकार तक ही सीमित रहे. अगर.clickable()पहले आता है, तो इंटरैक्शन एरिया, कॉम्पोनेंट की दिखने वाली, क्लिप की गई बाउंड्री से बाहर जा सकता है.
SurfaceDepthEffect
The SurfaceDepthEffect क्लास, शैडो के ट्रांज़िशन को मैनेज करती है, जो
इंटरैक्शन के स्टेटस के बीच होता है:
depthEffect: जब सरफ़ेस डिफ़ॉल्ट स्टेटस में होती है, तब इस्तेमाल किया जाने वाला शैडो इफ़ेक्ट.focusedDepthEffect: जब सरफ़ेस फ़ोकस की जाती है, तब इस्तेमाल किया जाने वाला शैडो इफ़ेक्ट.