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

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

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

اسکرول

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

ScalingLazyColumn ، TransformingLazyColumn و Picker به طور پیش‌فرض از حرکت اسکرول پشتیبانی می‌کنند، البته تا زمانی که نیاز باشد این کامپوننت‌ها را درون AppScaffold و ScreenScaffold قرار دهید و وضعیت لیست را بین ScreenScaffold و کامپوننت، مانند TransformingLazyColumn ، منتقل کنید.

AppScaffold و ScreenScaffold ساختار طرح‌بندی اولیه را برای برنامه‌های Wear OS فراهم می‌کنند و از قبل دارای جایگاهی برای نشانگر اسکرول با پیاده‌سازی پیش‌فرض هستند. برای سفارشی‌سازی پیشرفت اسکرول، یک نشانگر اسکرول بر اساس شیء list state ایجاد کنید، همانطور که در قطعه کد زیر نشان داده شده است:

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

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

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

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

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

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

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

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

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

// 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)
    }
}

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

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

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

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