إدخال البيانات عبر وحدة تحكُّم دورانية باستخدام Compose

إصدار Compose لـ Wear OS Material ‫2.5 ‫3

---

يشير الإدخال عبر وحدة تحكّم دورانية إلى إدخال البيانات من أجزاء الساعة التي تدور أو تتحرّك. في المتوسط، لا يستغرق تفاعل المستخدمين مع ساعاتهم سوى بضع ثوانٍ. يمكنك تحسين تجربة المستخدم من خلال استخدام ميزة "الإدخال الدوّار" للسماح للمستخدم بإنجاز مهام مختلفة بسرعة.

تشمل المصادر الرئيسية الثلاثة للإدخال الدوّار في معظم الساعات الزر الجانبي الدوّار (RSB)، وإما إطارًا دوّارًا ماديًا أو إطارًا دوّارًا يعمل باللمس، وهو منطقة لمس دائرية حول الشاشة. على الرغم من أنّ السلوك المتوقّع قد يختلف استنادًا إلى نوع الإدخال، احرص على توفير إمكانية الإدخال باستخدام زر التدوير لجميع التفاعلات الأساسية.

ملاحظة: بالنسبة إلى التطبيقات المستندة إلى العرض، يُرجى الرجوع إلى إدخال البيانات عبر وحدة تحكّم دورانية.

مؤشر التمرير

يتوقّع معظم المستخدمين أن تتيح التطبيقات إمكانية التمرير. أثناء تمرير المحتوى على الشاشة، قدِّم للمستخدمين ملاحظات مرئية استجابةً للتفاعلات باستخدام القرص الدوّار. يمكن أن تتضمّن الملاحظات المرئية مؤشرات التمرير للتمرير عموديًا أو مؤشرات الصفحات.

تتيح ScalingLazyColumn وTransformingLazyColumn وPicker إيماءة التمرير سريعًا تلقائيًا، إذا وضعت هذه المكوّنات داخل AppScaffold وScreenScaffold ونقلت حالة القائمة بين ScreenScaffold والمكوّن، مثل TransformingLazyColumn.

توفّر AppScaffold وScreenScaffold بنية التنسيق الأساسية لتطبيقات Wear OS، كما تتضمّن مساحة لمؤشر التمرير مع تنفيذ تلقائي. لتخصيص مستوى التقدّم في التمرير، أنشئ مؤشر تمرير استنادًا إلى عنصر حالة القائمة، كما هو موضّح في مقتطف الرمز البرمجي التالي:

val listState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {
    // ...
}
Rotary.kt

يمكنك ضبط سلوك المحاذاة لـ ScalingLazyColumn باستخدام ScalingLazyColumnDefaults.snapFlingBehavior، كما هو موضّح في مقتطف الرمز التالي:

val listState = rememberScalingLazyListState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {

    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = state,
        flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
    ) {
        // Content goes here
        // ...
    }
}
Rotary.kt

الإجراءات المخصّصة

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

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

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

class VolumeRange(
    val max: Int = 10,
    val min: Int = 0
)

private object VolumeViewModel {
    class MyViewModel : ViewModel() {
        private val _volumeState = mutableIntStateOf(0)
        val volumeState: State<Int>
            get() = _volumeState

        // ...
        fun onVolumeChangeByScroll(pixels: Float) {
            _volumeState.value = when {
                pixels > 0 -> minOf(volumeState.value + 1, VolumeRange().max)
                pixels < 0 -> maxOf(volumeState.value - 1, VolumeRange().min)
                else -> volumeState.value
            }
        }
    }
}
Rotary.kt

بعد ذلك، استخدِم دالة معاودة الاتصال بعد تلقّي الأحداث، كما هو موضّح في المقتطف التالي.

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeViewModel: VolumeViewModel.MyViewModel =
    viewModel()
val volumeState by volumeViewModel.volumeState

TransformingLazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel.onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) {
    // You can use volumeState here, for example:
    item {
        Text("Volume: $volumeState")
    }
}
Rotary.kt

يُرجى العِلم أنّه بغرض التبسيط، يستخدم المثال السابق قيم وحدات بكسل من المحتمل أن تكون حساسة بشكل مفرط إذا تم استخدامها فعليًا.