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