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

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

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

برای اعمال جلوه‌های مقیاس‌بندی و پیمایش توصیه‌شده:

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

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

قطعه کد زیر نحوه ایجاد یک لیست با استفاده از طرح TransformingLazyColumn را نشان می‌دهد تا محتوایی ایجاد شود که در اندازه‌های مختلف صفحه نمایش Wear OS عالی به نظر برسد .

این قطعه کد همچنین استفاده از اصلاح‌کننده‌ی minimumVerticalContentPadding را نشان می‌دهد که باید آن را روی آیتم‌های لیست تنظیم کنید تا فاصله‌ی (padding) صحیح در بالا و پایین لیست اعمال شود.

برای نمایش نشانگر اسکرول، 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

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

اگر نیاز به اضافه کردن رفتار snap-and-fling دارید، پارامتر flingBehavior را روی TransformingLazyColumnDefaults.snapFlingBehavior(columnState) تنظیم کنید، همانطور که در قطعه کد زیر نشان داده شده است: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt
{% کلمه به کلمه %} {% فعل کمکی %} {% کلمه به کلمه %} {% فعل کمکی %}