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

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

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

لتطبيق تأثيرات تغيير الحجم والتمرير المقترَحة، اتّبِع الخطوات التالية:

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

تعرض الصورة المتحركة التالية كيفية تغيير حجم عنصر القائمة وشكله عند الاقتراب من أعلى الشاشة وأسفلها:

يوضّح مقتطف الرمز التالي كيفية إنشاء قائمة باستخدام التنسيق TransformingLazyColumn لإنشاء محتوى يبدو رائعًا على مجموعة متنوعة من أحجام شاشات Wear OS.

يوضّح المقتطف أيضًا استخدام المعدِّل minimumVerticalContentPadding، الذي يجب ضبطه على عناصر القائمة لتطبيق المساحة المتروكة الصحيحة في أعلى القائمة وأسفلها.

لعرض مؤشر التمرير، شارِك 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

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

إذا كنت بحاجة إلى إضافة سلوك "التقاط وتحريك"، اضبط المَعلمة flingBehavior على TransformingLazyColumnDefaults.snapFlingBehavior(columnState)، كما هو موضّح في مقتطف الرمز التالي: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt