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

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

এপিআই সারফেস

পুল-টু-রিফ্রেশ বাস্তবায়নের জন্য 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 প্যারামিটারের সাথে ব্যবহার করেন।

ফলাফল

এই ভিডিওটিতে একটি রঙিন সূচক সহ একটি পুল-টু-রিফ্রেশ বাস্তবায়ন দেখানো হয়েছে:

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

উন্নত উদাহরণ: একটি সম্পূর্ণ কাস্টমাইজড সূচক তৈরি করুন

You can create complex custom indicators by leveraging existing composables and animations.This snippet demonstrates how to create a fully custom indicator in your pull-to-refresh implementation:

@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 ক্লাস থেকে কন্টেইনারের রঙ এবং অবস্থানের থ্রেশহোল্ড ব্যবহার করা হয়েছে। এইভাবে, আপনি Material লাইব্রেরি থেকে ডিফল্ট আচরণ এবং স্টাইলিং পুনরায় ব্যবহার করতে পারেন, এবং শুধুমাত্র আপনার আগ্রহের উপাদানগুলি কাস্টমাইজ করতে পারেন।
  • MyCustomIndicator একটি ক্লাউড আইকন এবং একটি CircularProgressIndicator মধ্যে স্থানান্তরের জন্য Crossfade ব্যবহার করে। ব্যবহারকারী যখন টানেন তখন ক্লাউড আইকনটি উপরে উঠে যায় এবং রিফ্রেশ অ্যাকশন শুরু হলে CircularProgressIndicator এ স্থানান্তরিত হয়।
    • targetState কোন অবস্থা প্রদর্শন করবে তা নির্ধারণ করতে isRefreshing ব্যবহার করে (ক্লাউড আইকন অথবা বৃত্তাকার অগ্রগতি নির্দেশক)।
    • animationSpec ট্রানজিশনের জন্য একটি tween অ্যানিমেশন সংজ্ঞায়িত করে, যার একটি নির্দিষ্ট সময়কাল CROSSFADE_DURATION_MILLIS
    • state.distanceFraction ব্যবহারকারী কতদূর নেমে এসেছে তা প্রতিনিধিত্ব করে, 0f (কোনও টান নেই) থেকে 1f (পুরোপুরি টানা) পর্যন্ত।
    • graphicsLayer মডিফায়ার স্কেল এবং স্বচ্ছতা পরিবর্তন করে।

ফলাফল

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

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

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