Card
कंपोज़ेबल, आपके यूज़र इंटरफ़ेस (यूआई) के लिए मटीरियल डिज़ाइन कंटेनर के तौर पर काम करता है.
आम तौर पर, कार्ड में एक ही तरह का कॉन्टेंट दिखता है. यहां कुछ उदाहरण दिए गए हैं, जिनमें कार्ड का इस्तेमाल किया जा सकता है:
- शॉपिंग ऐप्लिकेशन में मौजूद एक प्रॉडक्ट.
- समाचार ऐप्लिकेशन में मौजूद खबर.
- बातचीत करने के लिए इस्तेमाल होने वाले ऐप्लिकेशन में कोई मैसेज.
इसमें किसी एक कॉन्टेंट को दिखाने पर फ़ोकस किया जाता है, ताकि Card
को अन्य कंटेनर से अलग किया जा सके. उदाहरण के लिए, Scaffold
एक सामान्य स्ट्रक्चर देता है
उसे पूरी स्क्रीन पर देखने के लिए कर सकते हैं. कार्ड, आम तौर पर एक छोटे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के अंदर होता है
जबकि Column
या Row
जैसा कोई लेआउट कॉम्पोनेंट आसान
और ज़्यादा सामान्य एपीआई.
बुनियादी तौर पर लागू करना
Card
, कंपोज़ में मौजूद अन्य कंटेनर की तरह ही काम करता है. इसके कॉन्टेंट की जानकारी यहां दी जाती है
कंपोज़ेबल को कॉल किया जा सकता है. उदाहरण के लिए, देखें कि Card
में
नीचे दिए गए कम से कम उदाहरण में Text
को कॉल करें:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
बेहतर तरीके से लागू करना
Card
की एपीआई परिभाषा के लिए रेफ़रंस देखें. इसमें कई पैरामीटर तय किए जाते हैं. इनकी मदद से, कॉम्पोनेंट के दिखने के तरीके और उसके व्यवहार को पसंद के मुताबिक बनाया जा सकता है.
यहां कुछ अहम पैरामीटर के बारे में बताया गया है जिन पर ध्यान देना ज़रूरी है:
elevation
: कॉम्पोनेंट में एक शैडो जोड़ता है, जिससे वह बैकग्राउंड से ऊपर दिखता है.colors
: दोनों के डिफ़ॉल्ट रंग को सेट करने के लिए,CardColors
टाइप का इस्तेमाल करता है कंटेनर और सभी चाइल्ड एंट्री.enabled
: इस पैरामीटर के लिएfalse
पास करने पर, कार्ड इस तरह दिखता है बंद किया गया है और उपयोगकर्ता के इनपुट का जवाब नहीं देता है.onClick
: आम तौर पर,Card
क्लिक इवेंट स्वीकार नहीं करता. इसलिए, आपको जिस प्राइमरी ओवरलोड पर ध्यान देना है वह वह है जोonClick
पैरामीटर तय करता है. आपको इस ओवरलोड का इस्तेमाल तब करना चाहिए, जब आपको उपयोगकर्ता के दबाए गए दबाव का जवाब देने के लिएCard
को लागू करना.
इस उदाहरण में, इन पैरामीटर का इस्तेमाल करने का तरीका बताया गया है
जैसे कि shape
और modifier
.
भरा हुआ कार्ड
नीचे दिए गए उदाहरण में, भरे हुए कार्ड को लागू करने का तरीका बताया गया है.
यहां भरी हुई वैल्यू का रंग बदलने के लिए, colors
प्रॉपर्टी का इस्तेमाल किया गया है.
@Composable fun FilledCardExample() { Card( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surfaceVariant, ), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Filled", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
लागू होने पर यह ऐसा दिखता है:
थोड़ा ज़्यादा
नीचे दिए गए स्निपेट में, एलिवेटेड कार्ड को लागू करने का तरीका बताया गया है. इसके लिए, ElevatedCard
के लिए बने कॉम्पोनेंट का इस्तेमाल करें.
ऊंचाई को कंट्रोल करने के लिए, elevation
प्रॉपर्टी का इस्तेमाल किया जा सकता है और
जिससे शैडो बन जाता है.
@Composable fun ElevatedCardExample() { ElevatedCard( elevation = CardDefaults.cardElevation( defaultElevation = 6.dp ), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Elevated", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
यह लागू होने का तरीका इस तरह दिखता है:
आउटलाइन किया गया कार्ड
यहां आउटलाइन वाले कार्ड का उदाहरण दिया गया है.
OutlinedCard
कंपोज़ेबल.
@Composable fun OutlinedCardExample() { OutlinedCard( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surface, ), border = BorderStroke(1.dp, Color.Black), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Outlined", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
यह लागू होने का तरीका इस तरह दिखता है:
सीमाएं
कार्ड में स्क्रोल या खारिज करने की कार्रवाइयां पहले से मौजूद नहीं हैं, लेकिन इन्हें
कंपोज़ेबल. उदाहरण के लिए, खारिज करने के लिए स्वाइप लागू करना
कार्ड पर, इसे SwipeToDismiss
कंपोज़ेबल में इंटिग्रेट करें. इंटिग्रेट करने के लिए
स्क्रोल करते समय, verticalScroll
जैसे स्क्रोल मॉडिफ़ायर का इस्तेमाल करें. ज़्यादा जानकारी के लिए, स्क्रोल करने के बारे में दस्तावेज़ देखें.