ב-Jetpack Compose Glimmer, פלטפורמות משתמשות בצורות כדי להגדיר את הגבולות החזותיים ואת העיגול שלהן. הקלאס Shapes מספק רמות שונות של פינות מעוגלות, שמתאימות לסוגים שונים של רכיבים.
קטגוריות של צורות סגורות
המחלקות GlimmerTheme מגדירות שלוש מידות סטנדרטיות של צורות:
- קטן: צורה עם ארבע פינות באותו גודל. הוא משמש לרכיבים כמו כרטיסים. כברירת מחדל, זהו
RoundedCornerShapeשל 24.dp. - בינוני: צורה עם ארבע פינות באותו הגודל, בגודל שבין קטן לגדול. זהו הצורה הנפוצה ביותר והיא מוגדרת כברירת מחדל ב-surface. כברירת מחדל, הערך הוא
RoundedCornerShapeשל 36.dp. - גדול: צורה עם ארבע פינות מעוגלות לחלוטין. הצורה הזו משמשת לרכיבים כמו כפתורים. כברירת מחדל, הערך הוא
CircleShape.
דוגמה: קבלת צורות מ-GlimmerTheme והחלתן על רכיבים
קודם כול, מקבלים את הצורות המוגדרות מ-GlimmerTheme.shapes:
@Composable fun ShapesSample() { val shapes = GlimmerTheme.shapes GlimmerLazyColumn { item { ShapeItem("small", shape = shapes.small) } item { ShapeItem("medium", shape = shapes.medium) } item { ShapeItem("large", shape = shapes.large) } } }
לאחר מכן, אפשר להחיל את הצורות האלה על רכיבים מסוימים:
@Composable private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) { Box( modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape), contentAlignment = Alignment.Center, ) { Text(name) } }
התאמה אישית של צורות
הערך של הכיתה Shapes הוא @Immutable. אפשר ליצור עותק של הצורות הקיימות של ערכת הנושא ולשנות ערכים ספציפיים באמצעות פונקציית ההעתקה. כך תוכלו לשמור על המבנה של ערכת הנושא תוך התאמת רדיוסים ספציפיים למותג של האפליקציה.
דוגמה: שינוי ערכים ספציפיים של צורה
הקוד הבא מבטל ערכים ספציפיים של צורות:
val customShapes = GlimmerTheme.shapes.copy(
small = RoundedCornerShape(12.dp),
medium = RoundedCornerShape(20.dp)
)
ערכי ברירת מחדל
אם לא מציינים ערכים אחרים ב-GlimmerTheme, המערכת משתמשת בערכי ברירת המחדל הבאים:
| אסימון | צורת ברירת המחדל | גודל או רדיוס |
|---|---|---|
|
|
24.dp |
|
|
36.dp |
|
|
Fully Rounded |