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

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

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

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

اسکرول کنید

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

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

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

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(),
) { ... }

یک حالت سفارشی مدیریت شده در مدل 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(),
) { ... }