مؤلفه «کشیدن برای بازآوری» به کاربران امکان میدهد برای بازآوری دادهها، از ابتدای محتوای برنامه بهسمت پایین بکشند.
سطح میانای برنامهسازی کاربردی
از ترکیبپذیر PullToRefreshBox برای پیادهسازی «کشیدن برای بازآوری» استفاده کنید که
بهعنوان محفظهای برای محتوای پیمایشکردنی شما عمل میکند. پارامترهای کلیدی زیر
رفتار و ظاهر بازآوری را کنترل میکنند:
isRefreshing: مقدار بولی که نشان میدهد آیا کنش بازآوری درحال انجام است یا نه.-
onRefresh: تابع لامبدایی که وقتی کاربر بازآوری را شروع میکند اجرا میشود. -
indicator: نشانگری را که سیستم در «کشیدن برای بازآوری» ترسیم میکند سفارشیسازی میکند.
نمونه پایه
این تکهکد کاربرد اصلی PullToRefreshBox را نشان میدهد:
@Composable fun PullToRefreshBasicSample( items: List<String>, isRefreshing: Boolean, onRefresh: () -> Unit, modifier: Modifier = Modifier ) { PullToRefreshBox( isRefreshing = isRefreshing, onRefresh = onRefresh, modifier = modifier ) { LazyColumn(Modifier.fillMaxSize()) { items(items) { ListItem({ Text(text = it) }) } } } }
نکات کلیدی درباره کد
-
PullToRefreshBoxیکLazyColumnرا میپوشاند که فهرستی از رشتهها را نمایش میدهد. PullToRefreshBoxبه پارامترهایisRefreshingوonRefreshنیاز دارد.- محتوای داخل بلوک
PullToRefreshBoxنشاندهنده محتوای پیمایشپذیر است.
نتیجه
این ویدیو پیادهسازی پایه «کشیدن برای بازآوری» را از کد قبلی نشان میدهد:
نمونه پیشرفته: سفارشیسازی رنگ نشانگر
@Composable fun PullToRefreshCustomStyleSample( items: List<String>, isRefreshing: Boolean, onRefresh: () -> Unit, modifier: Modifier = Modifier ) { val state = rememberPullToRefreshState() PullToRefreshBox( isRefreshing = isRefreshing, onRefresh = onRefresh, modifier = modifier, state = state, indicator = { Indicator( modifier = Modifier.align(Alignment.TopCenter), isRefreshing = isRefreshing, containerColor = MaterialTheme.colorScheme.primaryContainer, color = MaterialTheme.colorScheme.onPrimaryContainer, state = state ) }, ) { LazyColumn(Modifier.fillMaxSize()) { items(items) { ListItem({ Text(text = it) }) } } } }
نکات کلیدی درباره کد
- رنگ نشانگر ازطریق ویژگیهای
containerColorوcolorدر پارامترindicatorسفارشیسازی میشود. rememberPullToRefreshState()وضعیت کنش بازآوری را مدیریت میکند. از این وضعیت در ارتباط با پارامترindicatorاستفاده میکنید.
نتیجه
این ویدیو پیادهسازی «کشیدن برای بازآوری» را با نشانگر رنگی نشان میدهد:
مثال پیشرفته: ایجاد نشانگر کاملاً سفارشیشده
میتوانید با بهرهگیری از ترکیبپذیرها و پویانماییهای موجود، نشانگرهای سفارشی پیچیده ایجاد کنید.این قطعه کد نحوه ایجاد یک نشانگر کاملاً سفارشی در پیادهسازی «کشیدن برای بازآوری» را نشان میدهد:
@Composable fun PullToRefreshCustomIndicatorSample( items: List<String>, isRefreshing: Boolean, onRefresh: () -> Unit, modifier: Modifier = Modifier ) { val state = rememberPullToRefreshState() PullToRefreshBox( isRefreshing = isRefreshing, onRefresh = onRefresh, modifier = modifier, state = state, indicator = { MyCustomIndicator( state = state, isRefreshing = isRefreshing, modifier = Modifier.align(Alignment.TopCenter) ) } ) { LazyColumn(Modifier.fillMaxSize()) { items(items) { ListItem({ Text(text = it) }) } } } } // ... @Composable fun MyCustomIndicator( state: PullToRefreshState, isRefreshing: Boolean, modifier: Modifier = Modifier, ) { Box( modifier = modifier.pullToRefresh( state = state, isRefreshing = isRefreshing, threshold = PositionalThreshold, onRefresh = { } ), contentAlignment = Alignment.Center ) { Crossfade( targetState = isRefreshing, animationSpec = tween(durationMillis = CROSSFADE_DURATION_MILLIS), modifier = Modifier.align(Alignment.Center) ) { refreshing -> if (refreshing) { CircularProgressIndicator(Modifier.size(SPINNER_SIZE)) } else { val distanceFraction = { state.distanceFraction.coerceIn(0f, 1f) } Icon( painter = rememberVectorPainter(AppIcons.CloudDownload), contentDescription = "Refresh", modifier = Modifier .size(18.dp) .graphicsLayer { val progress = distanceFraction() this.alpha = progress this.scaleX = progress this.scaleY = progress } ) } } } }
نکات کلیدی درباره کد
- قطعه کد قبلی از
Indicatorارائهشده توسط کتابخانه استفاده میکرد. این قطعه کد یک نشانگر سفارشی قابلترکیب به نامMyCustomIndicatorایجاد میکند. در این ترکیبپذیر، اصلاحکنندهpullToRefreshIndicatorموقعیتیابی و راهاندازی بازآوری را مدیریت میکند. - همانند قطعه کد قبلی، این نمونه نمونه
PullToRefreshStateرا استخراج میکند، بنابراین میتوانید همان نمونه را به هر دوPullToRefreshBoxوpullToRefreshModifierارسال کنید. - این نمونه از رنگ محفظه و آستانه موقعیت از کلاس
PullToRefreshDefaultsاستفاده میکند. بهاینترتیب، میتوانید از رفتار پیشفرض و سبکبندی کتابخانه Material مجدداً استفاده کنید، درحالیکه فقط عناصری را که به آنها علاقه دارید سفارشیسازی میکنید. MyCustomIndicatorازCrossfadeبرای انتقال بین نماد ابری وCircularProgressIndicatorاستفاده میکند. وقتی کاربر میکشد، نماد ابر بزرگ میشود، و وقتی کنش بازآوری شروع میشود، بهCircularProgressIndicatorتبدیل میشود.-
targetStateازisRefreshingبرای تعیین اینکه کدام وضعیت نمایش داده شود (نماد ابر یا نشانگر پیشرفت مدور) استفاده میکند. animationSpecپویانماییtweenرا برای گذر تعریف میکند، با مدتزمان مشخصشدهCROSSFADE_DURATION_MILLIS.state.distanceFractionنشاندهنده میزان کشیدن کاربر به پایین است، که از0f(بدون کشیدن) تا1f(کشیدن کامل) متغیر است.- اصلاحکننده
graphicsLayerمقیاس و شفافیت را اصلاح میکند.
-
نتیجه
این ویدیو نشانگر سفارشی کد قبلی را نشان میدهد: