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