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

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

API পৃষ্ঠ

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

ফলাফল

এই ভিডিওটি পূর্ববর্তী কোড থেকে প্রাথমিক পুল-টু-রিফ্রেশ বাস্তবায়ন প্রদর্শন করে:

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

উন্নত উদাহরণ: সূচক রঙ কাস্টমাইজ করুন 

@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 প্যারামিটারের সাথে একত্রে এই অবস্থাটি ব্যবহার করেন।

ফলাফল

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

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

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

আপনি বিদ্যমান কম্পোজেবল এবং অ্যানিমেশনগুলি ব্যবহার করে জটিল কাস্টম সূচক তৈরি করতে পারেন৷ এই স্নিপেটটি দেখায় কিভাবে আপনার পুল-টু-রিফ্রেশ বাস্তবায়নে একটি সম্পূর্ণ কাস্টম সূচক তৈরি করতে হয়: 

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

ফলাফল

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

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

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