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

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

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

برای افزودن جلوه‌ی مقیاس‌بندی و پیمایش، از Modifier.transformedHeight استفاده کنید تا Compose بتواند تغییر ارتفاع را هنگام پیمایش آیتم در صفحه محاسبه کند و از transformation = SurfaceTransformation(transformationSpec) برای اعمال جلوه‌های بصری، از جمله کوچک کردن آیتم به صورت بصری برای مطابقت با قبلی، استفاده کنید. برای کامپوننت‌هایی که transformation به عنوان پارامتر نمی‌پذیرند، مانند Text ، از TransformationSpec سفارشی استفاده کنید.

انیمیشن زیر نشان می‌دهد که چگونه یک عنصر لیست هنگام نزدیک شدن به بالا و پایین صفحه، تغییر اندازه می‌دهد و شکل آن تغییر می‌کند:

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

یک افکت ضربه محکم و ناگهانی اضافه کنید

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

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

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