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

نوشتن برای نسخه Wear OS Material 2.5 3

---

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

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

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

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

قطعه کد زیر نحوه ایجاد یک لیست با استفاده از طرح بندی TransformingLazyColumn برای ایجاد محتوایی که در اندازه های مختلف صفحه نمایش Wear OS عالی به نظر می رسد را نشان می دهد، به عنوان مثال در کد نمونه زیر، padding لازم را به اولین و آخرین عناصر لیست که در contentPadding of the 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 اضافه کنید

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

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

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

{% کلمه به کلمه %} {% آخر کلمه %}