একটি বাম এবং ডান বা উপরে এবং নীচের পদ্ধতিতে বিষয়বস্তু ফ্লিপ করতে, আপনি যথাক্রমে HorizontalPager
এবং VerticalPager
কম্পোজেবল ব্যবহার করতে পারেন। এই কম্পোজেবলগুলির ভিউ সিস্টেমে ViewPager
অনুরূপ ফাংশন রয়েছে। ডিফল্টরূপে, HorizontalPager
স্ক্রিনের পুরো প্রস্থ নেয়, VerticalPager
পুরো উচ্চতা নেয়, এবং পেজাররা একবারে শুধুমাত্র একটি পৃষ্ঠা ফ্লাইং করে। এই ডিফল্ট সব কনফিগারযোগ্য.
HorizontalPager
একটি পেজার তৈরি করতে যা অনুভূমিকভাবে বাম এবং ডানদিকে স্ক্রোল করে, HorizontalPager
ব্যবহার করুন:
// Display 10 items val pagerState = rememberPagerState(pageCount = { 10 }) HorizontalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier.fillMaxWidth() ) }
VerticalPager
একটি পেজার তৈরি করতে যা উপরে এবং নীচে স্ক্রোল করে, VerticalPager
ব্যবহার করুন:
// Display 10 items val pagerState = rememberPagerState(pageCount = { 10 }) VerticalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier.fillMaxWidth() ) }
অলস সৃষ্টি
HorizontalPager
এবং VerticalPager
উভয়ের পৃষ্ঠাগুলি অলসভাবে তৈরি করা হয় এবং যখন প্রয়োজন হয় তখন সাজানো হয়। ব্যবহারকারী পৃষ্ঠাগুলির মাধ্যমে স্ক্রোল করার সাথে সাথে, কম্পোজেবল যেকোন পৃষ্ঠাগুলিকে সরিয়ে দেয় যা আর প্রয়োজন হয় না।
অফস্ক্রিনে আরও পৃষ্ঠা লোড করুন
ডিফল্টরূপে, পেজার শুধুমাত্র পর্দায় দৃশ্যমান পৃষ্ঠাগুলি লোড করে। অফস্ক্রিনে আরও পৃষ্ঠা লোড করতে, শূন্যের চেয়ে বেশি মানে beyondBoundsPageCount
সেট করুন।
পেজারে একটি আইটেমে স্ক্রোল করুন
পেজারে একটি নির্দিষ্ট পৃষ্ঠায় স্ক্রোল করতে, rememberPagerState()
ব্যবহার করে একটি PagerState
অবজেক্ট তৈরি করুন এবং পেজারে state
প্যারামিটার হিসাবে এটি পাস করুন। আপনি একটি CoroutineScope
ভিতরে এই রাজ্যে PagerState#scrollToPage()
কল করতে পারেন:
val pagerState = rememberPagerState(pageCount = { 10 }) HorizontalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier .fillMaxWidth() .height(100.dp) ) } // scroll to page val coroutineScope = rememberCoroutineScope() Button(onClick = { coroutineScope.launch { // Call scroll to on pagerState pagerState.scrollToPage(5) } }, modifier = Modifier.align(Alignment.BottomCenter)) { Text("Jump to Page 5") }
আপনি যদি পৃষ্ঠায় অ্যানিমেট করতে চান, PagerState#animateScrollToPage()
ফাংশনটি ব্যবহার করুন:
val pagerState = rememberPagerState(pageCount = { 10 }) HorizontalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier .fillMaxWidth() .height(100.dp) ) } // scroll to page val coroutineScope = rememberCoroutineScope() Button(onClick = { coroutineScope.launch { // Call scroll to on pagerState pagerState.animateScrollToPage(5) } }, modifier = Modifier.align(Alignment.BottomCenter)) { Text("Jump to Page 5") }
পৃষ্ঠার অবস্থার পরিবর্তন সম্পর্কে বিজ্ঞপ্তি পান
PagerState
পৃষ্ঠাগুলি সম্পর্কে তথ্য সহ তিনটি বৈশিষ্ট্য রয়েছে: currentPage
, settledPage
, এবং targetPage
।
-
currentPage
: স্ন্যাপ অবস্থানের নিকটতম পৃষ্ঠা। ডিফল্টরূপে, স্ন্যাপ পজিশন লেআউটের শুরুতে থাকে। -
settledPage
: পৃষ্ঠা নম্বর যখন কোনো অ্যানিমেশন বা স্ক্রোলিং চলছে না। এটিcurrentPage
প্রপার্টি থেকে আলাদা যে পৃষ্ঠাটি স্ন্যাপ পজিশনের যথেষ্ট কাছাকাছি থাকলেcurrentPage
অবিলম্বে আপডেট হয়, কিন্তু সমস্ত অ্যানিমেশন চালানো শেষ না হওয়া পর্যন্তsettledPage
একই থাকে। -
targetPage
: স্ক্রলিং আন্দোলনের জন্য প্রস্তাবিত স্টপ পজিশন।
আপনি এই ভেরিয়েবলের পরিবর্তনগুলি পর্যবেক্ষণ করতে এবং তাদের প্রতিক্রিয়া জানাতে snapshotFlow
ফাংশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ, প্রতিটি পৃষ্ঠা পরিবর্তনের একটি বিশ্লেষণ ইভেন্ট পাঠাতে, আপনি নিম্নলিখিতগুলি করতে পারেন:
val pagerState = rememberPagerState(pageCount = { 10 }) LaunchedEffect(pagerState) { // Collect from the a snapshotFlow reading the currentPage snapshotFlow { pagerState.currentPage }.collect { page -> // Do something with each page change, for example: // viewModel.sendPageSelectedEvent(page) Log.d("Page change", "Page changed to $page") } } VerticalPager( state = pagerState, ) { page -> Text(text = "Page: $page") }
একটি পৃষ্ঠা সূচক যোগ করুন
একটি পৃষ্ঠায় একটি সূচক যোগ করতে, PagerState
অবজেক্ট ব্যবহার করুন পৃষ্ঠার সংখ্যার মধ্যে কোন পৃষ্ঠাটি নির্বাচন করা হয়েছে সে সম্পর্কে তথ্য পেতে এবং আপনার কাস্টম নির্দেশক আঁকুন।
উদাহরণস্বরূপ, আপনি যদি একটি সাধারণ বৃত্ত নির্দেশক চান, তাহলে আপনি pagerState.currentPage
ব্যবহার করে পৃষ্ঠাটি নির্বাচিত হয়েছে কিনা তার উপর ভিত্তি করে চেনাশোনাগুলির সংখ্যা পুনরাবৃত্তি করতে পারেন এবং বৃত্তের রঙ পরিবর্তন করতে পারেন :
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, modifier = Modifier.fillMaxSize() ) { page -> // Our page content Text( text = "Page: $page", ) } Row( Modifier .wrapContentHeight() .fillMaxWidth() .align(Alignment.BottomCenter) .padding(bottom = 8.dp), horizontalArrangement = Arrangement.Center ) { repeat(pagerState.pageCount) { iteration -> val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray Box( modifier = Modifier .padding(2.dp) .clip(CircleShape) .background(color) .size(16.dp) ) } }
সামগ্রীতে আইটেম স্ক্রোল প্রভাব প্রয়োগ করুন
একটি সাধারণ ব্যবহারের ক্ষেত্রে আপনার পেজার আইটেমগুলিতে প্রভাব প্রয়োগ করতে স্ক্রোল অবস্থান ব্যবহার করা হয়। বর্তমানে নির্বাচিত পৃষ্ঠা থেকে একটি পৃষ্ঠা কত দূরে তা জানতে, আপনি PagerState.currentPageOffsetFraction
ব্যবহার করতে পারেন। তারপরে আপনি নির্বাচিত পৃষ্ঠা থেকে দূরত্বের উপর ভিত্তি করে আপনার সামগ্রীতে রূপান্তর প্রভাব প্রয়োগ করতে পারেন।
উদাহরণস্বরূপ, আইটেমগুলি কেন্দ্র থেকে কত দূরে রয়েছে তার উপর ভিত্তি করে অস্বচ্ছতা সামঞ্জস্য করতে, পেজারের ভিতরে একটি আইটেমে Modifier.graphicsLayer
ব্যবহার করে alpha
পরিবর্তন করুন:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager(state = pagerState) { page -> Card( Modifier .size(200.dp) .graphicsLayer { // Calculate the absolute offset for the current page from the // scroll position. We use the absolute value which allows us to mirror // any effects for both directions val pageOffset = ( (pagerState.currentPage - page) + pagerState .currentPageOffsetFraction ).absoluteValue // We animate the alpha, between 50% and 100% alpha = lerp( start = 0.5f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ) } ) { // Card content } }
কাস্টম পৃষ্ঠা মাপ
ডিফল্টরূপে, HorizontalPager
এবং VerticalPager
যথাক্রমে সম্পূর্ণ প্রস্থ বা সম্পূর্ণ উচ্চতা নেয়। আপনি pageSize
ভেরিয়েবল সেট করতে পারেন একটি Fixed
, Fill
(ডিফল্ট), অথবা একটি কাস্টম সাইজ ক্যালকুলেশন।
উদাহরণস্বরূপ, 100.dp
এর একটি নির্দিষ্ট প্রস্থের পৃষ্ঠা সেট করতে:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, pageSize = PageSize.Fixed(100.dp) ) { page -> // page content }
ভিউপোর্ট আকারের উপর ভিত্তি করে পৃষ্ঠাগুলির আকার দিতে, একটি কাস্টম পৃষ্ঠার আকার গণনা ব্যবহার করুন। একটি কাস্টম PageSize
অবজেক্ট তৈরি করুন এবং আইটেমগুলির মধ্যে ব্যবধান বিবেচনা করে availableSpace
তিনটি দ্বারা ভাগ করুন:
private val threePagesPerViewport = object : PageSize { override fun Density.calculateMainAxisPageSize( availableSpace: Int, pageSpacing: Int ): Int { return (availableSpace - 2 * pageSpacing) / 3 } }
বিষয়বস্তু প্যাডিং
HorizontalPager
এবং VerticalPager
উভয়ই কন্টেন্ট প্যাডিং পরিবর্তন করতে সমর্থন করে, যা আপনাকে পৃষ্ঠাগুলির সর্বাধিক আকার এবং প্রান্তিককরণকে প্রভাবিত করতে দেয়।
উদাহরণস্বরূপ, start
প্যাডিং সেট করা পৃষ্ঠাগুলিকে শেষের দিকে সারিবদ্ধ করে:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(start = 64.dp), ) { page -> // page content }
একই মানের start
এবং end
প্যাডিং উভয় সেট করা আইটেমটিকে অনুভূমিকভাবে কেন্দ্র করে:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(horizontal = 32.dp), ) { page -> // page content }
end
প্যাডিং সেট করা শুরুর দিকে পৃষ্ঠাগুলিকে সারিবদ্ধ করে:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(end = 64.dp), ) { page -> // page content }
VerticalPager
জন্য অনুরূপ প্রভাব অর্জন করতে আপনি top
এবং bottom
মানগুলি সেট করতে পারেন। মান 32.dp
এখানে শুধুমাত্র একটি উদাহরণ হিসাবে ব্যবহার করা হয়েছে; আপনি প্রতিটি প্যাডিং মাত্রা যেকোনো মান সেট করতে পারেন।
স্ক্রোল আচরণ কাস্টমাইজ করুন
ডিফল্ট HorizontalPager
এবং VerticalPager
কম্পোজেবল নির্দিষ্ট করে কিভাবে স্ক্রলিং অঙ্গভঙ্গি পেজারের সাথে কাজ করে। যাইহোক, আপনি pagerSnapDistance
বা flingBehavior
এর মতো ডিফল্টগুলি কাস্টমাইজ এবং পরিবর্তন করতে পারেন।
স্ন্যাপ দূরত্ব
ডিফল্টরূপে, HorizontalPager
এবং VerticalPager
সর্বোচ্চ সংখ্যক পৃষ্ঠা সেট করে যা একটি ফ্লিং অঙ্গভঙ্গি একবারে একটি পৃষ্ঠায় স্ক্রোল করতে পারে। এটি পরিবর্তন করতে, flingBehavior
এ pagerSnapDistance
সেট করুন:
val pagerState = rememberPagerState(pageCount = { 10 }) val fling = PagerDefaults.flingBehavior( state = pagerState, pagerSnapDistance = PagerSnapDistance.atMost(10) ) Column(modifier = Modifier.fillMaxSize()) { HorizontalPager( state = pagerState, pageSize = PageSize.Fixed(200.dp), beyondViewportPageCount = 10, flingBehavior = fling ) { PagerSampleItem(page = it) } }
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- কম্পোজে সীমাবদ্ধতা লেআউট
- গ্রাফিক্স মডিফায়ার
- রচনা করার জন্য
CoordinatorLayout
স্থানান্তর করুন