התוכן הקומפוזבילי 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, ) } }
היישום הזה נראה כך:
![הכרטיס מלא בצבע של הווריאנט של פני השטח מעיצוב החומר.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-filled.png?authuser=5&hl=he)
כרטיס מורחב
קטע הקוד הבא מדגים איך מטמיעים כרטיס גבוה. משתמשים ב
ייעודי לתוכן קומפוזבילי 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, ) } }
היישום הזה נראה כך:
![כרטיס מופיע מעל הרקע של האפליקציה, עם צל.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-elevated.png?authuser=5&hl=he)
כרטיס עם קווי מתאר
הדוגמה הבאה היא של כרטיס קווי. משתמשים
תוכן קומפוזבילי 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, ) } }
היישום הזה נראה כך:
![הכרטיס מוקף בגבול שחור דק.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-outlined.png?authuser=5&hl=he)
מגבלות
הכרטיסים לא כוללים גלילה או ביטול מובנות, אבל אפשר לשלב אותם
של תכנים קומפוזביליים שמספקים את התכונות האלה. לדוגמה, כדי להטמיע את התכונה 'החלקה' כדי לסגור
בכרטיס, לשלב אותו עם התוכן הקומפוזבילי SwipeToDismiss
. כדי לשלב:
בזמן הגלילה, משתמשים במקשי קיצור של גלילה כמו verticalScroll
. הצגת הגלילה
תיעוד למידע נוסף.