כרטיס

הרכיב הקומפוזבילי 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,
        )
    }
}

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

כרטיס ממולא בצבע של וריאציית המשטח מהתאמת העיצוב של Google Material Design.
איור 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,
        )
    }
}

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

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

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

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

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

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

מגבלות

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

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