כרטיס

התוכן הקומפוזבילי 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. דוגמה לכרטיס מורחב.

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

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

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