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

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

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

لإضافة تأثير تكبير/تصغير وتأثير تمرير، استخدِم Modifier.transformedHeight للسماح لميزة "الإنشاء" بحساب تغيير الارتفاع أثناء تمرير العنصر على الشاشة وtransformation = SurfaceTransformation(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

إضافة تأثير "التصغير السريع"

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

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

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