لیست هایی با Compose for Wear OS

فهرست‌ها به کاربران اجازه می‌دهند یک مورد را از میان مجموعه‌ای از گزینه‌های موجود در دستگاه‌های Wear OS انتخاب کنند.

بسیاری از دستگاه‌های Wear OS از صفحه‌نمایش‌های گرد استفاده می‌کنند، که دیدن موارد فهرستی را که در نزدیکی بالا و پایین صفحه ظاهر می‌شوند دشوارتر می‌کند. به همین دلیل، Compose for Wear OS شامل نسخه‌ای از کلاس LazyColumn به نام ScalingLazyColumn است که از افکت‌های مقیاس‌بندی و محو شدن پشتیبانی می‌کند. وقتی آیتم ها به سمت مرکز صفحه حرکت می کنند، بزرگتر و مات تر می شوند.

انیمیشن زیر نشان می دهد که چگونه اندازه و شفافیت یک عنصر با حرکت در صفحه نمایش تغییر می کند:

قطعه کد زیر نحوه ایجاد یک لیست با استفاده از نسخه Horologist از طرح بندی 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

افکت Snap-and-Fling اضافه کنید

می توانید یک رفتار snap-and-fling را به حرکات انگشت اضافه کنید که کاربر روی اشیاء ScalingLazyColumn اعمال می کند. این افکت به کاربران کمک می کند تا با دقت بیشتری در میان موارد موجود در یک لیست حرکت کنند و در عین حال به آنها کمک می کند تا در یک لیست طولانی با سرعت بیشتری حرکت کنند.

برای افزودن این افکت به نسخه Horologist از ScalingLazyColumn ، پارامتر rotaryMode columnState را روی RotaryWithSnap قرار دهید، همانطور که در قطعه کد زیر نشان داده شده است:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt
{% کلمه به کلمه %} {% آخر کلمه %} {% کلمه به کلمه %} {% آخر کلمه %}