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