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