רשימות עם 'כתיבה' ל-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