ב-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) { val interactionSource = remember { MutableInteractionSource() } Box( modifier .aspectRatio(2.5f) .fillMaxWidth() .surface(interactionSource = interactionSource, shape = shape), contentAlignment = Alignment.Center, ) { Text(name) } }
התאמה אישית של צורות
הכיתה Shapes היא @Immutable. אפשר ליצור עותק של צורות העיצוב הקיימות ולשנות ערכים ספציפיים באמצעות פונקציית ההעתקה. כך תוכלו לשמור על המבנה של ערכת הנושא תוך התאמת רדיוסים ספציפיים למותג של האפליקציה.
דוגמה: שינוי ערכים ספציפיים של צורה
הקוד הבא מחליף ערכים ספציפיים של צורה:
@Composable fun CustomShapesSample() { val customShapes = GlimmerTheme.shapes.copy( small = RoundedCornerShape(12.dp), medium = RoundedCornerShape(20.dp) ) val interactionSource = remember { MutableInteractionSource() } Box( Modifier .aspectRatio(2.5f) .fillMaxWidth() .surface(interactionSource = interactionSource, shape = customShapes.small), contentAlignment = Alignment.Center, ) { Text("custom small") } }
ערכי ברירת מחדל
אם לא מציינים ערכים אחרים ב-GlimmerTheme, המערכת משתמשת בערכי ברירת המחדל הבאים:
| אסימון | צורת ברירת המחדל | גודל או רדיוס |
|---|---|---|
|
|
24.dp |
|
|
36.dp |
|
|
מעוגל לחלוטין |