כרטיס

התוכן הקומפוזבילי Card משמש כקונטיינר בעיצוב Material לממשק המשתמש. בדרך כלל הכרטיסים מציגים קטע תוכן יחיד ועקבי. אלו הם כמה דוגמאות למקומות שבהם אפשר להשתמש בכרטיס:

• מוצר באפליקציית שופינג.
• כתבה חדשותית באפליקציית חדשות.
• הודעה באפליקציית תקשורת.

ההתמקדות היא בהצגת פריט תוכן יחיד שמסמן Card ממאגרים אחרים. לדוגמה, Scaffold מספק מבנה כללי לצפות במסך מלא. הכרטיס הוא בדרך כלל רכיב קטן יותר בממשק המשתמש בתוך ורכיב פריסה כמו Column או Row מספק ועוד API כללי יותר.

הטמעה בסיסית

ההתנהגות של Card דומה לזו של קונטיינרים אחרים ב-Compose. עליך להצהיר על התוכן שלו עד קוראים לתכנים קומפוזביליים אחרים בתוכו. לדוגמה, נבחן את האופן שבו Card מכיל קריאה ל-Text בדוגמה המינימלית הבאה:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

הטמעות מתקדמות

בחומר העזר תוכלו למצוא את הגדרת ה-API של 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. הצגת הגלילה תיעוד למידע נוסף.

מקורות מידע נוספים

• מסמכי ממשק המשתמש של Material