כרטיס

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

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

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

כרטיס בולט שמאוכלס בטקסט ובסמלים.
איור 1. דוגמה לכרטיס עם טקסט וסמלים.

הטמעה בסיסית

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

ההטמעה הזו נראית כך:

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

כרטיס בולט

קטע הקוד הבא מראה איך מטמיעים כרטיס מורחב. משתמשים ב-composable הייעודי 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

ההטמעה הזו נראית כך:

כרטיס מופיע מעל לרקע של האפליקציה עם צל.
איור 3. דוגמה לכרטיס ברמה גבוהה יותר.

כרטיס עם קווי מתאר

זו דוגמה לכרטיס עם קו מתאר. משתמשים ב-composable הייעודי 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

ההטמעה הזו נראית כך:

הכרטיס מוקף בשוליים שחורים דקים.
איור 4. דוגמה לכרטיס עם קו מתאר.

מגבלות

הכרטיסים לא כוללים פעולות גלילה או סגירה מובנות, אבל אפשר לשלב אותם ברכיבים מורכבים שמציעים את התכונות האלה. לדוגמה, כדי להטמיע את האפשרות להחליק כדי לסגור כרטיס, משלבים אותו עם הרכיב הניתן לקיבוץ SwipeToDismiss. כדי לשלב את הרכיב עם גלילה, משתמשים במודיפיקציות של גלילה כמו verticalScroll. מידע נוסף זמין במסמכי התיעוד בנושא גלילה.

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