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

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

एपीआई सरफ़ेस

नीचे स्वाइप करके रीफ़्रेश करने की सुविधा लागू करने के लिए, 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 पैरामीटर के साथ किया जाता है.

ध्यान दें: बुनियादी उदाहरण में, state को PullToRefreshBox में पास नहीं किया गया था, क्योंकि यह डिफ़ॉल्ट पैरामीटर वैल्यू का इस्तेमाल कर रहा था. हालांकि, इस उदाहरण में आपको स्टेट तय करनी होगी. साथ ही, बॉक्स और इंडिकेटर, दोनों को वह स्टेट पास करनी होगी, ताकि उनके व्यवहार में तालमेल बना रहे.

नतीजा

इस वीडियो में, रंगीन इंडिकेटर के साथ नीचे स्वाइप करके रीफ़्रेश करने की सुविधा को लागू करने का तरीका दिखाया गया है:

दूसरी इमेज. कस्टम स्टाइल के साथ, नीचे स्वाइप करके रीफ़्रेश करने की सुविधा लागू की गई है.

ऐडवांस उदाहरण: पूरी तरह से कस्टमाइज़ किया गया इंडिकेटर बनाना

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

@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