'রিফ্রেশ করতে টানুন' কম্পোনেন্ট ব্যবহারকারীদের কোনও অ্যাপের কন্টেন্টের শুরুতে নিচের দিকে টেনে ডেটা রিফ্রেশ করতে দেয়।
API সারফেস
পুল-টু-রিফ্রেশ প্রয়োগ করতে 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) }) } } } }
কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট
indicatorপ্যারামিটারের মধ্যে থাকাcontainerColorএবংcolorপ্রপার্টির মাধ্যমে ইন্ডিকেটরের রঙ কাস্টমাইজ করা হয়।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( 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নামের একটি কাস্টম ইন্ডিকেটর কম্পোজ করার উপযুক্ত আইটেম তৈরি করে। এই কম্পোজ করার উপযুক্ত আইটেমে,pullToRefreshIndicatorমডিফায়ার পজিশনিং ও রিফ্রেশ ট্রিগার করা ম্যানেজ করে। - আগের স্নিপেটের মতো, এই উদাহরণটি
PullToRefreshStateইনস্ট্যান্স এক্সট্র্যাক্ট করে, তাই আপনিPullToRefreshBoxএবংpullToRefreshModifierদু'টিতেই একই ইনস্ট্যান্স পাস করতে পারবেন। - এই উদাহরণে,
PullToRefreshDefaultsক্লাস থেকে কন্টেনার কালার ও পজিশন থ্রেশহোল্ড ব্যবহার করা হয়েছে। এইভাবে, আপনি Material লাইব্রেরি থেকে ডিফল্ট আচরণ ও স্টাইলিং আবার ব্যবহার করতে পারবেন, শুধুমাত্র সেইসব এলিমেন্ট কাস্টমাইজ করতে পারবেন যেগুলিতে আপনার আগ্রহ আছে। MyCustomIndicatorক্লাউড আইকন ওCircularProgressIndicator-এর মধ্যে ট্রানজিশন করতেCrossfadeব্যবহার করে। ব্যবহারকারী পুল করার সাথে সাথে ক্লাউড আইকনটি বড় হতে থাকে এবং রিফ্রেশ অ্যাকশন শুরু হলে এটিCircularProgressIndicator-এ ট্রানজিট করে।targetStateকোন স্টেট দেখাতে হবে তা নির্ধারণ করতেisRefreshingব্যবহার করে (ক্লাউড আইকন বা বৃত্তাকার প্রগ্রেস ইন্ডিকেটর)।animationSpecট্রানজিশনের জন্যtweenঅ্যানিমেশনকে সংজ্ঞায়িত করে, যার নির্দিষ্ট সময়সীমাCROSSFADE_DURATION_MILLIS।state.distanceFractionথেকে0f(কোনও পুল নেই) থেকে1f(সম্পূর্ণ পুল করা হয়েছে) পর্যন্ত রেঞ্জ ব্যবহারকারী কতদূর নিচে টেনেছেন তা দেখায়।graphicsLayerমডিফায়ার স্কেল ও স্বচ্ছতা পরিবর্তন করে।
ফলাফল
এই ভিডিওতে আগের কোড থেকে কাস্টম ইন্ডিকেটর দেখানো হয়েছে: