রিফ্রেশ করতে টানুন

পুল টু রিফ্রেশ কম্পোনেন্টটি ব্যবহারকারীদের অ্যাপের কন্টেন্টের শুরুতে নিচের দিকে টেনে ডেটা রিফ্রেশ করার সুযোগ দেয়।

এপিআই পৃষ্ঠ

পুল-টু-রিফ্রেশ বাস্তবায়নের জন্য 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.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 মডিফায়ারটি স্কেল এবং স্বচ্ছতা পরিবর্তন করে।

ফলাফল

এই ভিডিওটিতে পূর্ববর্তী কোড থেকে কাস্টম ইন্ডিকেটরটি দেখানো হয়েছে:

চিত্র ৩। একটি কাস্টম ইন্ডিকেটরসহ পুল-টু-রিফ্রেশ বাস্তবায়ন।

অতিরিক্ত সম্পদ