ورودی چرخشی با «نگارش»

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

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

نشانگر پیمایش

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

ScalingLazyColumn، TransformingLazyColumn، و Picker به‌طور پیش‌فرض از اشاره پیمایش پشتیبانی می‌کنند، اگر این مؤلفه‌ها را داخل AppScaffold و ScreenScaffold قرار دهید و وضعیت فهرست را بین ScreenScaffold و مؤلفه (مثلاً TransformingLazyColumn) رد کنید.

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

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

می‌توانید بااستفاده از ScalingLazyColumnDefaults.snapFlingBehavior، رفتار چسباندن را برای 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
        // ...
    }
}

کنش‌های سفارشی

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

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

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

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

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

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

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