مولفه کشش برای تازه کردن به کاربران این امکان را می دهد که در ابتدای محتوای برنامه به سمت پایین بکشند تا داده ها را تازه کنند.
سطح API
از PullToRefreshBox composable برای اجرای pull-to-refresh استفاده کنید که به عنوان محفظه ای برای محتوای قابل پیمایش شما عمل می کند. پارامترهای کلیدی زیر رفتار و ظاهر تازه سازی را کنترل می کنند:
-
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استفاده می کنید.
نتیجه
این ویدئو اجرای pull-to-refresh را با نشانگر رنگی نشان می دهد:
مثال پیشرفته: یک نشانگر کاملا سفارشی ایجاد کنید
میتوانید با استفاده از قابلیتهای ترکیبسازی و انیمیشنهای موجود، شاخصهای سفارشی پیچیده ایجاد کنید. این قطعه نشان میدهد که چگونه میتوانید یک نشانگر کاملاً سفارشی در پیادهسازی pull-to-fresh ایجاد کنید:
@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( imageVector = Icons.Filled.CloudDownload, contentDescription = "Refresh", modifier = Modifier .size(18.dp) .graphicsLayer { val progress = distanceFraction() this.alpha = progress this.scaleX = progress this.scaleY = progress } ) } } } }
نکات کلیدی در مورد کد
- قطعه قبلی از
Indicatorارائه شده توسط کتابخانه استفاده می کرد. این قطعه یک نشانگر سفارشی به نامMyCustomIndicatorایجاد می کند. در این composable، اصلاحکنندهpullToRefreshIndicatorموقعیتیابی و راهاندازی یک تازهسازی را انجام میدهد. - مانند قطعه قبلی، مثال نمونه
PullToRefreshStateاستخراج می کند، بنابراین می توانید همان نمونه را بهPullToRefreshBoxوpullToRefreshModifierارسال کنید. - مثال از رنگ ظرف و آستانه موقعیت از کلاس
PullToRefreshDefaultsاستفاده می کند. به این ترتیب، میتوانید از رفتار و استایل پیشفرض از کتابخانه Material استفاده مجدد کنید، در حالی که فقط عناصری را که به آنها علاقه دارید سفارشی کنید. -
MyCustomIndicatorازCrossfadeبرای انتقال بین نماد ابر وCircularProgressIndicatorاستفاده می کند. با کشیدن کاربر، نماد ابر بزرگ میشود و با شروع عملیات بهروزرسانی، به یکCircularProgressIndicatorمنتقل میشود.-
targetStateازisRefreshingبرای تعیین حالت نمایش (نماد ابر یا نشانگر پیشرفت دایره ای) استفاده می کند. -
animationSpecیک انیمیشنtweenبرای انتقال با مدت زمان مشخصCROSSFADE_DURATION_MILLISتعریف می کند. -
state.distanceFractionنشان دهنده میزانی است که کاربر به سمت پایین کشیده شده است، از0f(بدون کشش) تا1f(کاملا کشیده شده). - اصلاح کننده
graphicsLayerمقیاس و شفافیت را اصلاح می کند.
-
نتیجه
این ویدیو نشانگر سفارشی کد قبلی را نشان می دهد: