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

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

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

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

קטע הקוד הבא מראה איך ליצור רשימה באמצעות של הפריסה ScalingLazyColumn כדי ליצור תוכן נראה נהדר על מגוון גדלים של מסכים עם Wear OS, למשל בדוגמה שלמטה, היא תוסיף את המרווח הפנימי הנדרש לרכיב הראשון ולרכיב האחרון של הרשימה שמוגדרת בscrollState של ScalingLazyColumn:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

הוספת אפקט של הזזה מהירה

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

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

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