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

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

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

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

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

קטע הקוד הבא מראה איך ליצור רשימה באמצעות פריסת 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. האפקט הזה עוזר למשתמשים לנווט בצורה מדויקת יותר בין הפריטים ברשימה, וגם לעבור מהר יותר על רשימה ארוכה.

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

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