ورودی چرخشی با Compose

ورودی چرخشی به ورودی از قطعات ساعت شما که می چرخند یا می چرخند اشاره دارد. به طور متوسط، کاربران تنها چند ثانیه را صرف تعامل با ساعت خود می کنند. شما می توانید تجربه کاربری خود را با استفاده از ورودی روتاری افزایش دهید تا به کاربر اجازه دهید تا به سرعت وظایف مختلف را انجام دهد.

سه منبع اصلی ورودی چرخشی در اکثر ساعت‌ها عبارتند از دکمه جانبی چرخان (RSB) و یک قاب فیزیکی یا یک قاب لمسی که یک ناحیه لمسی دایره‌ای در اطراف صفحه نمایش است. اگرچه رفتار مورد انتظار ممکن است بر اساس نوع ورودی متفاوت باشد، مطمئن شوید که از ورودی چرخشی برای تمام فعل و انفعالات ضروری پشتیبانی می کنید.

اسکرول کنید

اکثر کاربران انتظار دارند که برنامه ها از حرکت اسکرول پشتیبانی کنند. همانطور که محتوا بر روی صفحه نمایش می چرخد، در پاسخ به تعاملات چرخشی به کاربران بازخورد بصری بدهید. بازخورد بصری می تواند شامل نشانگرهای موقعیت برای اسکرول عمودی یا نشانگرهای صفحه باشد.

ScalingLazyColumn و Picker به طور پیش‌فرض از ژست پیمایش پشتیبانی می‌کنند، تا زمانی که لازم باشد آن اجزا را در یک Scaffold قرار دهید. Scaffold ساختار طرح‌بندی اولیه را برای برنامه‌های Wear OS فراهم می‌کند و در حال حاضر یک شکاف برای نشانگر اسکرول دارد. برای نشان دادن پیشرفت پیمایش، یک نشانگر موقعیت براساس شی وضعیت لیست ایجاد کنید، همانطور که در قطعه کد زیر نشان داده شده است:

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {
    // ...
}
Rotary.kt

همانطور که در قطعه کد زیر نشان داده شده است، می‌توانید با استفاده از ScalingLazyColumnDefaults.snapFlingBehavior ، یک رفتار snap را برای ScalingLazyColumn پیکربندی کنید:

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {

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

اقدامات سفارشی

همچنین می توانید اقدامات سفارشی را ایجاد کنید که به ورودی چرخشی در برنامه خود پاسخ می دهند. برای مثال، از ورودی چرخشی برای بزرگ‌نمایی و کوچک‌نمایی یا کنترل صدا در یک برنامه رسانه استفاده کنید.

اگر مؤلفه شما به طور بومی از رویدادهای پیمایش مانند کنترل صدا پشتیبانی نمی کند، می توانید رویدادهای اسکرول را خودتان مدیریت کنید.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            // handle rotary scroll events
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }

یک حالت سفارشی مدیریت شده در مدل view ایجاد کنید و یک فراخوان سفارشی که برای پردازش رویدادهای اسکرول چرخشی استفاده می شود.

// VolumeViewModel.kt

object VolumeRange(
    public val max: Int = 10
    public val min: Int = 0
)

val volumeState: MutableStateFlow<Int> = ...

fun onVolumeChangeByScroll(pixels: Float) {
    volumeState.value = when {
        pixels > 0 -> min (volumeState.value + 1, VolumeRange.max)
        pixels < 0 -> max (volumeState.value - 1, VolumeRange.min)
    }
}

برای سادگی، مثال قبلی از مقادیر پیکسلی استفاده می کند که اگر واقعاً استفاده شوند، احتمالاً بیش از حد حساس هستند.

همانطور که در قطعه زیر نشان داده شده است، هنگامی که رویدادها را دریافت کردید، از تماس برگشتی استفاده کنید.

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeState by volumeViewModel.volumeState.collectAsState()

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel
                .onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }