कार्ड

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,
        )
    }
}
Card.kt

यह लागू होने का तरीका इस तरह दिखता है:

एलिवेटेड कार्ड

नीचे दिए गए स्निपेट में, एलिवेटेड कार्ड को लागू करने का तरीका बताया गया है. इसका इस्तेमाल करें खास तौर पर बनाया गया 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,
        )
    }
}
Card.kt

यह लागू होने का तरीका इस तरह दिखता है:

आउटलाइन किया गया कार्ड

आउटलाइन किए गए कार्ड का एक उदाहरण नीचे दिया गया है. 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,
        )
    }
}
Card.kt

यह लागू होने का तरीका इस तरह दिखता है:

सीमाएं

कार्ड में स्क्रोल या खारिज करने की कार्रवाइयां पहले से मौजूद नहीं हैं, लेकिन इन्हें कंपोज़ेबल. उदाहरण के लिए, खारिज करने के लिए स्वाइप लागू करना कार्ड पर, इसे SwipeToDismiss कंपोज़ेबल में इंटिग्रेट करें. इंटिग्रेट करने के लिए स्क्रोल करते समय, verticalScroll जैसे स्क्रोल मॉडिफ़ायर का इस्तेमाल करें. स्क्रोल करें दस्तावेज़ में ज़्यादा जानकारी पाएं.

अन्य संसाधन

• यूज़र इंटरफ़ेस (यूआई) के मटीरियल के दस्तावेज़