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

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

एपीआई का प्लैटफ़ॉर्म

पुल-टू-रिफ़्रेश सुविधा लागू करने के लिए, PullToRefreshBox कॉम्पोज़ेबल का इस्तेमाल करें. यह आपके स्क्रोल किए जा सकने वाले कॉन्टेंट के लिए कंटेनर के तौर पर काम करता है. रीफ़्रेश करने के तरीके और दिखने के तरीके को ये मुख्य पैरामीटर कंट्रोल करते हैं:

  • isRefreshing: यह एक बूलियन वैल्यू है, जिससे पता चलता है कि फ़िलहाल रीफ़्रेश करने की कार्रवाई की जा रही है या नहीं.
  • onRefresh: एक ऐसा LAMBDA फ़ंक्शन जो उपयोगकर्ता के रीफ़्रेश करने पर चालू होता है.
  • 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.pullToRefreshIndicator(
            state = state,
            isRefreshing = isRefreshing,
            containerColor = PullToRefreshDefaults.containerColor,
            threshold = PositionalThreshold
        ),
        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 मॉडिफ़ायर, स्केल और पारदर्शिता में बदलाव करता है.

नतीजा

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

तीसरी इमेज. कस्टम इंडिकेटर के साथ, 'खींचकर रीफ़्रेश करें' सुविधा लागू की गई है.

अन्य संसाधन