רשימות עם 'כתיבה' ל-Wear OS

רשימות מאפשרות למשתמשים לבחור פריט מתוך קבוצת אפשרויות במכשירי Wear OS.

במכשירים רבים עם Wear OS יש מסכים עגולים, ולכן קשה יותר לראות את הפריטים ברשימה שמופיעים בחלק העליון ובחלק התחתון של המסך. לכן, Compose for Wear OS כולל גרסה של המחלקה LazyColumn שנקראת TransformingLazyColumn, שתומכת בהתאמה לעיצוב ובאנימציות של טרנספורמציה. כשפריטים נעים לקצוות, הם קטנים ומתבלבלים.

כדי להוסיף אפקט של שינוי קנה מידה וגלילה, משתמשים ב-Modifier.transformedHeight כדי לאפשר ל-Compose לחשב את שינוי הגובה בזמן שהפריט גוללים במסך, וב-transformation = SurfaceTransformation(transformationSpec) כדי להחיל את האפקטים החזותיים, כולל שינוי קנה המידה של הפריט כך שיתאים לפריט הקודם.

באנימציה הבאה אפשר לראות איך הגודל והשקיפות של רכיב משתנים כשהוא נע במסך:

בקטע הקוד הבא מוסבר איך ליצור רשימה באמצעות הפריסה של TransformingLazyColumn כדי ליצור תוכן שנראה נהדר במגוון גדלי מסכים של Wear OS. לדוגמה, בקטע הקוד לדוגמה הבא, המערכת תוסיף את הרווח הנדרש לרכיבים הראשון והאחרון ברשימה, שמוגדרים ב-contentPadding של ה-TransformingLazyColumn. כדי שסמל הגלילה יוצג, צריך לחלק את הערך columnState בין הערך ScreenScaffold לבין הערך TransformingLazyColumn:

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

הוספת אפקט של הצמדה והשלכה

אם אתם צריכים להוסיף התנהגות של הצמדה והשלכה, מומלץ להשתמש ב-ScalingLazyColumn. האפקט הזה עוזר למשתמשים לנווט בצורה מדויקת יותר בין הפריטים ברשימה, וגם לעבור מהר יותר ברשימה ארוכה.

כדי להוסיף את האפקט הזה לגרסה של Horologist ל-ScalingLazyColumn, מגדירים את הפרמטר rotaryMode של columnState לערך RotaryWithSnap, כפי שמוצג בקטע הקוד הבא:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt