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

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

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

כדי להחיל את אפקטי ההזזה והשינוי המומלצים:

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

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

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

בקטע הקוד מוצג גם השימוש בשינוי minimumVerticalContentPadding, שצריך להגדיר אותו בפריטים ברשימה כדי להחיל את הריווח הנכון בחלק העליון והתחתון של הרשימה.

כדי להציג את אינדיקטור הגלילה, משתפים את columnState בין ScreenScaffold לבין TransformingLazyColumn:

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

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

אם רוצים להוסיף התנהגות של הצמדה והטלה, צריך להגדיר את הפרמטר flingBehavior לערך TransformingLazyColumnDefaults.snapFlingBehavior(columnState), כמו שמוצג בקטע הקוד הבא: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt