القوائم التي تتضمن ميزة "الكتابة" على نظام التشغيل Wear OS

تتيح القوائم للمستخدمين اختيار عنصر من مجموعة خيارات على أجهزة Wear OS.

تستخدم العديد من أجهزة Wear OS شاشات دائرية، ما يصعّب رؤية عناصر القائمة التي تظهر بالقرب من أعلى الشاشة وأسفلها. لهذا السبب، يتضمّن Compose for Wear OS إصدارًا من الفئة LazyColumn باسم TransformingLazyColumn، ويتيح هذا الإصدار تغيير الحجم والرسوم المتحركة التي تتضمّن تغيير الشكل. عندما تنتقل العناصر إلى الحواف، تصبح أصغر حجمًا وتتلاشى.

لإضافة تأثير تغيير الحجم والتمرير، استخدِم Modifier.transformedHeight للسماح لـ Compose باحتساب التغيير في الارتفاع أثناء تمرير العنصر على الشاشة، واستخدِم transformation = SurfaceTransformation(transformationSpec) لتطبيق التأثيرات المرئية، بما في ذلك تصغير حجم العنصر بصريًا ليتطابق مع العنصر السابق. استخدِم TransformationSpec مخصّصًا للمكوّنات التي لا تقبل transformation كمَعلمة، مثل Text.

تعرض الصورة المتحركة التالية كيف يتغير حجم العنصر وشفافيته أثناء تحرّكه على الشاشة:

يوضّح مقتطف الرمز البرمجي التالي كيفية إنشاء قائمة باستخدام التصميم 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

إضافة تأثير "التقاط الصور ومشاركتها بسرعة"

إذا كنت بحاجة إلى إضافة سلوك "التقاط وتحريك"، نقترح استخدام ScalingLazyColumn. يساعد هذا التأثير المستخدمين في التنقّل بدقة أكبر بين العناصر في قائمة، كما يساعدهم في التنقّل بشكل أسرع في قائمة طويلة.

لإضافة هذا التأثير إلى إصدار ScalingLazyColumn في Horologist، اضبط المَعلمة rotaryMode الخاصة بـ columnState على RotaryWithSnap، كما هو موضّح في مقتطف الرمز التالي:

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