পুল টু রিফ্রেশ কম্পোনেন্ট ব্যবহারকারীদের ডেটা রিফ্রেশ করার জন্য অ্যাপের কন্টেন্টের শুরুতে নিচের দিকে টেনে আনতে সাহায্য করে।
এপিআই সারফেস
পুল-টু-রিফ্রেশ বাস্তবায়নের জন্য 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মোড়ানো হয়, যা স্ট্রিংগুলির একটি তালিকা প্রদর্শন করে। -
PullToRefreshBoxisRefreshingএবং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মডিফায়ার স্কেল এবং স্বচ্ছতা পরিবর্তন করে।
-
ফলাফল
এই ভিডিওটিতে পূর্ববর্তী কোড থেকে কাস্টম সূচকটি দেখানো হয়েছে: