স্ক্রোল, স্ক্রোল

স্ক্রোল মডিফায়ার

verticalScroll এবং horizontalScroll মডিফায়ারগুলি ব্যবহারকারীকে একটি উপাদান স্ক্রোল করার সবচেয়ে সহজ উপায় প্রদান করে যখন এর বিষয়বস্তুর সীমা তার সর্বোচ্চ আকারের সীমাবদ্ধতার চেয়ে বড় হয়। verticalScroll এবং horizontalScroll মডিফায়ারগুলির সাহায্যে আপনাকে বিষয়বস্তু অনুবাদ বা অফসেট করার প্রয়োজন হয় না। 

@Composable
private fun ScrollBoxes() {
    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}
GesturesSnippets.kt

স্ক্রোল-ইঙ্গিতের প্রতি সাড়া দেওয়া একটি সরল উল্লম্ব তালিকা
চিত্র ১. স্ক্রোল অঙ্গভঙ্গির প্রতি সাড়া দিয়ে একটি সরল উল্লম্ব তালিকা।

ScrollState আপনাকে স্ক্রোলের অবস্থান পরিবর্তন করতে বা এর বর্তমান অবস্থা পেতে দেয়। ডিফল্ট প্যারামিটার দিয়ে এটি তৈরি করতে, rememberScrollState() ব্যবহার করুন। 

@Composable
private fun ScrollBoxesSmooth() {
    // Smoothly scroll 100px on first composition
    val state = rememberScrollState()
    LaunchedEffect(Unit) { state.animateScrollTo(100) }

    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .padding(horizontal = 8.dp)
            .verticalScroll(state)
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}
GesturesSnippets.kt

স্ক্রোলযোগ্য এলাকা সংশোধক

scrollableArea মডিফায়ার হল কাস্টম স্ক্রোলেবল কন্টেইনার তৈরির জন্য একটি মৌলিক বিল্ডিং ব্লক। এটি scrollable মডিফায়ারের উপর একটি উচ্চ-স্তরের বিমূর্ততা প্রদান করে, যা জেসচার ডেল্টা ইন্টারপ্রিটেশন, কন্টেন্ট ক্লিপিং এবং ওভারস্ক্রোল এফেক্টের মতো সাধারণ প্রয়োজনীয়তাগুলি পরিচালনা করে।

যদিও scrollableArea কাস্টম বাস্তবায়নের জন্য ব্যবহৃত হয়, আপনার সাধারণত verticalScroll , horizontalScroll , অথবা স্ট্যান্ডার্ড স্ক্রোলিং তালিকার জন্য LazyColumn মতো তৈরি সমাধান পছন্দ করা উচিত। এই উচ্চ-স্তরের উপাদানগুলি সাধারণ ব্যবহারের ক্ষেত্রে সহজ এবং scrollableArea ব্যবহার করে নিজেই তৈরি করা হয়।

scrollableArea এবং scrollable মডিফায়ারের মধ্যে পার্থক্য

scrollableArea এবং scrollable মধ্যে প্রধান পার্থক্য হলো তারা ব্যবহারকারীর স্ক্রোল অঙ্গভঙ্গি কীভাবে ব্যাখ্যা করে:

  • scrollable (রঙের ডেল্টা): ডেল্টা সরাসরি স্ক্রিনে ব্যবহারকারীর ইনপুটের (যেমন, পয়েন্টার ড্র্যাগ) ভৌত গতিবিধি প্রতিফলিত করে।
  • scrollableArea (কন্টেন্ট-ওরিয়েন্টেড ডেল্টা): delta শব্দার্থগতভাবে উল্টানো হয় যাতে স্ক্রোল অবস্থানের নির্বাচিত পরিবর্তনটি প্রতিনিধিত্ব করে যাতে ব্যবহারকারীর অঙ্গভঙ্গির সাথে কন্টেন্টটি নড়াচড়া করে বলে মনে হয়, যা সাধারণত পয়েন্টার নড়াচড়ার বিপরীত।

এটিকে এভাবে ভাবুন: scrollable আপনাকে বলে যে পয়েন্টারটি কীভাবে সরানো হয়েছে, যখন scrollableArea সেই পয়েন্টার গতিবিধিকে একটি সাধারণ স্ক্রোলযোগ্য দৃশ্যের মধ্যে কীভাবে কন্টেন্টটি সরানো উচিত তা অনুবাদ করে। এই বিপরীতকরণের কারণেই একটি স্ট্যান্ডার্ড স্ক্রোলযোগ্য কন্টেইনার বাস্তবায়নের সময় scrollableArea আরও স্বাভাবিক মনে হয়।

নিম্নলিখিত সারণিতে সাধারণ পরিস্থিতির জন্য ব-দ্বীপ চিহ্নগুলির সারসংক্ষেপ দেওয়া হল:

ব্যবহারকারীর অঙ্গভঙ্গি

scrollable পদ্ধতিতে dispatchRawDelta জন্য ডেল্টা রিপোর্ট করা হয়েছে

scrollableArea দ্বারা dispatchRawDelta জন্য ডেল্টা রিপোর্ট করা হয়েছে *

পয়েন্টার উপরে সরানো হচ্ছে

নেতিবাচক

ইতিবাচক

পয়েন্টারটি নীচে সরানো হচ্ছে

ইতিবাচক

নেতিবাচক

পয়েন্টার বাম দিকে সরে যায়

নেতিবাচক

ধনাত্মক (RTL-এর জন্য নেতিবাচক )

পয়েন্টার ডানদিকে সরে যাচ্ছে

ইতিবাচক

নেতিবাচক (RTL এর জন্য ইতিবাচক )

(*) scrollableArea ডেল্টা সাইন সম্পর্কে নোট : scrollableArea থেকে ডেল্টার সাইনটি কেবল একটি সাধারণ বিপরীত নয়। এটি বুদ্ধিমত্তার সাথে বিবেচনা করে:

  1. ওরিয়েন্টেশন : উল্লম্ব বা অনুভূমিক।
  2. LayoutDirection : LTR অথবা RTL (বিশেষ করে অনুভূমিক স্ক্রলিংয়ের জন্য গুরুত্বপূর্ণ)।
  3. reverseScrolling ফ্ল্যাগ : স্ক্রোলের দিকটি উল্টানো কিনা।

স্ক্রোল ডেল্টা উল্টানোর পাশাপাশি, scrollableArea লেআউটের সীমানায় কন্টেন্ট ক্লিপ করে এবং ওভারস্ক্রোল প্রভাবের রেন্ডারিং পরিচালনা করে। ডিফল্টরূপে, এটি LocalOverscrollFactory দ্বারা প্রদত্ত প্রভাব ব্যবহার করে। আপনি scrollableArea ওভারলোড ব্যবহার করে এটি কাস্টমাইজ বা অক্ষম করতে পারেন যা একটি OverscrollEffect প্যারামিটার গ্রহণ করে।

scrollableArea মডিফায়ার কখন ব্যবহার করবেন

যখন আপনার এমন একটি কাস্টম স্ক্রলিং কম্পোনেন্ট তৈরি করার প্রয়োজন হয় যা horizontalScroll বা verticalScroll মডিফায়ার অথবা Lazy লেআউট দ্বারা পর্যাপ্তভাবে পরিবেশিত হয় না, তখন আপনার scrollableArea মডিফায়ার ব্যবহার করা উচিত। এর মধ্যে প্রায়শই নিম্নলিখিত ক্ষেত্রে অন্তর্ভুক্ত থাকে:

  • কাস্টম লেআউট লজিক : যখন স্ক্রোল অবস্থানের উপর ভিত্তি করে আইটেমের বিন্যাস গতিশীলভাবে পরিবর্তিত হয়।
  • অনন্য ভিজ্যুয়াল এফেক্ট : শিশুরা স্ক্রোল করার সময় তাদের উপর রূপান্তর, স্কেলিং বা অন্যান্য প্রভাব প্রয়োগ করা।
  • সরাসরি নিয়ন্ত্রণ : verticalScroll বা লেজি লেআউট যা প্রকাশ করে তার বাইরে স্ক্রলিং মেকানিক্সের উপর সূক্ষ্ম নিয়ন্ত্রণের প্রয়োজন।

scrollableArea ব্যবহার করে কাস্টম চাকার মতো তালিকা তৈরি করুন

নিচের নমুনাটি scrollableArea ব্যবহার করে একটি কাস্টম উল্লম্ব তালিকা তৈরি করে যেখানে আইটেমগুলি কেন্দ্র থেকে দূরে সরে যাওয়ার সাথে সাথে স্কেল করে, একটি "চাকার মতো" ভিজ্যুয়াল এফেক্ট তৈরি করে। এই ধরণের স্ক্রোল-নির্ভর রূপান্তর scrollableArea এর জন্য একটি নিখুঁত ব্যবহারের ক্ষেত্রে।

চিত্র ২। scrollableArea ব্যবহার করে একটি কাস্টমাইজড উল্লম্ব তালিকা। 

@Composable
private fun ScrollableAreaSample() {
    // ...
    Layout(
        modifier =
            Modifier
                .size(150.dp)
                .scrollableArea(scrollState, Orientation.Vertical)
                .background(Color.LightGray),
        // ...
    ) { measurables, constraints ->
        // ...
        // Update the maximum scroll value to not scroll beyond limits and stop when scroll
        // reaches the end.
        scrollState.maxValue = (totalHeight - viewportHeight).coerceAtLeast(0)

        // Position the children within the layout.
        layout(constraints.maxWidth, viewportHeight) {
            // The current vertical scroll position, in pixels.
            val scrollY = scrollState.value
            val viewportCenterY = scrollY + viewportHeight / 2

            var placeableLayoutPositionY = 0
            placeables.forEach { placeable ->
                // This sample applies a scaling effect to items based on their distance
                // from the center, creating a wheel-like effect.
                // ...
                // Place the item horizontally centered with a layer transformation for
                // scaling to achieve wheel-like effect.
                placeable.placeRelativeWithLayer(
                    x = constraints.maxWidth / 2 - placeable.width / 2,
                    // Offset y by the scroll position to make placeable visible in the viewport.
                    y = placeableLayoutPositionY - scrollY,
                ) {
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                // Move to the next item's vertical position.
                placeableLayoutPositionY += placeable.height
            }
        }
    }
}
// ...
GesturesSnippets.kt

স্ক্রোলযোগ্য সংশোধক

scrollable মডিফায়ার স্ক্রোল মডিফায়ার থেকে আলাদা, কারণ scrollable স্ক্রোল অঙ্গভঙ্গি সনাক্ত করে এবং ডেল্টা ক্যাপচার করে, কিন্তু এর বিষয়বস্তু স্বয়ংক্রিয়ভাবে অফসেট করে না। পরিবর্তে এটি ScrollableState এর মাধ্যমে ব্যবহারকারীর কাছে অর্পণ করা হয়, যা এই মডিফায়ারটি সঠিকভাবে কাজ করার জন্য প্রয়োজনীয়।

ScrollableState তৈরি করার সময় আপনাকে অবশ্যই একটি consumeScrollDelta ফাংশন প্রদান করতে হবে যা প্রতিটি স্ক্রোল ধাপে (জেসচার ইনপুট, মসৃণ স্ক্রলিং বা ফ্লিং করে) পিক্সেলে ডেল্টা ব্যবহার করে ব্যবহার করা হবে। এই ফাংশনটি স্ক্রোলিংয়ের দূরত্বের পরিমাণ ফেরত দেবে, যাতে নিশ্চিত করা যায় যে ইভেন্টটি সঠিকভাবে প্রচারিত হচ্ছে যেখানে নেস্টেড উপাদান রয়েছে যার scrollable মডিফায়ার রয়েছে।

নিম্নলিখিত স্নিপেটটি অঙ্গভঙ্গি সনাক্ত করে এবং একটি অফসেটের জন্য একটি সংখ্যাসূচক মান প্রদর্শন করে, কিন্তু কোনও উপাদান অফসেট করে না: 

@Composable
private fun ScrollableSample() {
    // actual composable state
    var offset by remember { mutableFloatStateOf(0f) }
    Box(
        Modifier
            .size(150.dp)
            .scrollable(
                orientation = Orientation.Vertical,
                // Scrollable state: describes how to consume
                // scrolling delta and update offset
                state = rememberScrollableState { delta ->
                    offset += delta
                    delta
                }
            )
            .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ) {
        Text(offset.toString())
    }
}
GesturesSnippets.kt

একটি UI উপাদান যা আঙুলের প্রেস শনাক্ত করে এবং আঙুলের অবস্থানের সংখ্যাসূচক মান প্রদর্শন করে।
চিত্র ৩। একটি UI উপাদান যা আঙুলের প্রেস সনাক্ত করে এবং আঙুলের অবস্থানের সংখ্যাসূচক মান প্রদর্শন করে।
{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %} {% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}
পূর্ববর্তী
আলতো চাপুন
পরবর্তী
নেস্টেড স্ক্রোল