צורות ב-Jetpack Compose Glimmer

מכשירי XR שמתאימים לשימוש
ההנחיות האלה יעזרו לכם ליצור חוויות למכשירי XR מהסוגים הבאים.
משקפיים עם תצוגה

ב-Jetpack Compose Glimmer, פלטפורמות משתמשות בצורות כדי להגדיר את הגבולות החזותיים ואת העיגול שלהן. הקלאס Shapes מספק רמות שונות של פינות מעוגלות, שמתאימות לסוגים שונים של רכיבים.

איור 1. דוגמה לצורות גדולות, בינוניות וקטנות ב-Jetpack Compose Glimmer.

קטגוריות של צורות סגורות

המחלקות 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, המערכת משתמשת בערכי ברירת המחדל הבאים:

אסימון צורת ברירת המחדל גודל או רדיוס

small

RoundedCornerShape

24.dp

medium

RoundedCornerShape

36.dp

large

CircleShape

Fully Rounded