כרטיס

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

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

ההבדל בין 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. דוגמה לכרטיס מלא.

כרטיס בולט

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

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