नीचे खींचकर रीफ़्रेश करें

पुल-टू-रीफ़्रेश कॉम्पोनेंट की मदद से, उपयोगकर्ता किसी ऐप्लिकेशन के कॉन्टेंट को रीफ़्रेश करने के लिए, उसे नीचे की ओर खींच सकते हैं.

एपीआई सरफ़ेस

पुल-टू-रीफ़्रेश की सुविधा लागू करने के लिए, 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.kt

कोड के बारे में अहम बातें

• 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) })
            }
        }
    }
}
PullToRefreshBox.kt

कोड के बारे में अहम बातें

• इंडिकेटर के रंग को, 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
                        }
                )
            }
        }
    }
}
PullToRefreshBox.kt

कोड के बारे में अहम बातें

• पिछले स्निपेट में, लाइब्रेरी से मिले Indicator का इस्तेमाल किया गया था. इस स्निपेट में, MyCustomIndicator नाम का एक कस्टम इंडिकेटर कॉम्पोज़ेबल बनाया गया है. इस कॉम्पोज़ेबल में, pullToRefreshIndicator मॉडिफ़ायर, रीफ़्रेश करने की सुविधा को पोज़िशन करने और ट्रिगर करने का काम करता है.
• पिछले स्निपेट की तरह, इस उदाहरण में PullToRefreshState इंस्टेंस को एक्सट्रैक्ट किया गया है, ताकि PullToRefreshBox और pullToRefreshModifier, दोनों को एक ही इंस्टेंस पास किया जा सके.
• इस उदाहरण में, PullToRefreshDefaults क्लास से कंटेनर के रंग और पोज़िशन थ्रेशोल्ड का इस्तेमाल किया गया है. इस तरह, Material लाइब्रेरी से डिफ़ॉल्ट व्यवहार और स्टाइलिंग को फिर से इस्तेमाल किया जा सकता है. साथ ही, सिर्फ़ उन एलिमेंट को पसंद के मुताबिक बनाया जा सकता है जिनमें आपकी दिलचस्पी है.
• MyCustomIndicator क्लाउड आइकॉन और CircularProgressIndicator के बीच ट्रांज़िशन के लिए Crossfade का इस्तेमाल करता है. उपयोगकर्ता के खींचने पर, क्लाउड आइकॉन का साइज़ बढ़ता है. साथ ही, रीफ़्रेश करने की कार्रवाई शुरू होने पर, यह CircularProgressIndicator में बदल जाता है.
  • targetState , isRefreshing का इस्तेमाल करके यह तय करता है कि कौनसा स्टेट दिखाना है (क्लाउड आइकॉन या सर्कुलर प्रोग्रेस इंडिकेटर).
  • animationSpec, ट्रांज़िशन के लिए tween ऐनिमेशन तय करता है. इसकी अवधि CROSSFADE_DURATION_MILLIS होती है.
  • state.distanceFraction दिखाता है कि उपयोगकर्ता ने कितना नीचे की ओर खींचा है. इसकी वैल्यू 0f (नहीं खींचा गया) से लेकर 1f (पूरी तरह से खींचा गया) तक होती है.
  • graphicsLayer मॉडिफ़ायर, स्केल और पारदर्शिता में बदलाव करता है.

नतीजा

इस वीडियो में, ऊपर दिए गए कोड से बना कस्टम इंडिकेटर दिखाया गया है:

अन्य संसाधन

• PullToRefreshState