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

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

small

RoundedCornerShape

24.dp

medium

RoundedCornerShape

36.dp

large

CircleShape

מעוגל לחלוטין