ডায়নামিক টপ অ্যাপ বার তৈরি করা

এই নির্দেশিকা Compose-এ কীভাবে ডায়নামিক টপ অ্যাপ বার তৈরি করতে হয় তা ব্যাখ্যা করে, যা তালিকা থেকে আইটেম বেছে নিলে এর বিকল্প পরিবর্তন করে। বেছে নেওয়ার অবস্থার উপর ভিত্তি করে আপনি উপরের অ্যাপ বারের' নাম ও অ্যাকশন পরিবর্তন করতে পারবেন।

ডায়নামিক টপ অ্যাপ বার আচরণ প্রয়োগ করা

এই কোডটি সবচেয়ে উপরের অ্যাপ বারের জন্য একটি কম্পোজ করা যায় এমন ফাংশন নির্ধারণ করে যা আইটেম বেছে নেওয়ার উপর ভিত্তি করে পরিবর্তিত হয়:

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • AppBarSelectionActions বেছে নেওয়া আইটেমের ইন্ডেক্সের Set গ্রহণ করে।
  • আপনি কোনও আইটেম বেছে নিয়েছেন কিনা তার উপর নির্ভর করে topBarText পরিবর্তন হয়।
    • আপনি আইটেম বেছে নিলে, বেছে নেওয়া আইটেমের সংখ্যা বর্ণনা করে এমন টেক্সট TopAppBar-এ দেখা যায়।
    • আপনি কোনও আইটেম বেছে না নিলে, topBarText হল "আইটেমের তালিকা"।
  • actions ব্লকটি সেইসব অ্যাকশনকে সংজ্ঞায়িত করে যা আপনি অ্যাপের সবচেয়ে উপরের বারে দেখান। If hasSelection সত্য হলে, টেক্সটের পরে একটি শেয়ার আইকন দেখা যায়।
  • আপনি আইকনে ক্লিক করলে, IconButton-এর onClick ল্যাম্বডা শেয়ার অ্যাকশন হ্যান্ডেল করে।

ফলাফল

ডায়নামিক টপ অ্যাপ বারে শেয়ার আইকন সহ বেছে নেওয়া ৩টি আইটেম টেক্সটটি দেখানো হয়। আইটেম বেছে নেওয়া হলে তবেই এই টেক্সট ও আইকন দেখা যায়
ছবি ১. টেক্সট ও শেয়ার আইকন সহ ডায়নামিক টপ অ্যাপ বার যা শুধুমাত্র আইটেম বেছে নেওয়া হলে দেখা যায়।

ডায়নামিক টপ অ্যাপ বারে বেছে নেওয়ার উপযুক্ত তালিকা ইন্টিগ্রেট করা

এই উদাহরণে দেখানো হয়েছে কীভাবে ডায়নামিক টপ অ্যাপ বারে বেছে নেওয়ার মতো তালিকা যোগ করতে হয়:

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        modifier = modifier,
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • আপনি কতগুলি তালিকা আইটেম বেছে নিয়েছেন তার উপর ভিত্তি করে উপরের বারটি আপডেট হয়।
  • selectedItems বেছে নেওয়া আইটেম ইনডেক্সের সেট হোল্ড করে।
  • AppBarMultiSelectionExample স্ক্রিনকে স্ট্রাকচার করার জন্য Scaffold ব্যবহার করে।
    • topBar = { AppBarSelectionActions(selectedItems) } টপ অ্যাপ বার হিসেবে AppBarSelectionActions কম্পোজ করার উপযুক্ত আইটেম সেট করে। AppBarSelectionActions selectedItems স্ট্যাটাস পায়।
  • LazyColumn আইটেমগুলিকে একটি উল্লম্ব তালিকায় দেখায়, শুধুমাত্র স্ক্রিনে দেখা যাওয়া আইটেমগুলি রেন্ডার করে।
  • ListItemSelectable দিয়ে বেছে নেওয়ার উপযুক্ত তালিকার আইটেম বোঝানো হয়।
    • combinedClickable আইটেম বেছে নেওয়ার জন্য ক্লিক ও দীর্ঘ-ক্লিক, দুটিই হ্যান্ডেল করতে দেয়। ক্লিক করলে কোনও অ্যাকশন পারফর্ম করা হয়, তবে কোনও আইটেমে লং-ক্লিক করলে সেটির বেছে নেওয়ার স্ট্যাটাস টগল হয়।

ফলাফল

ডায়নামিক টপ অ্যাপ বারে '৩টি আইটেম বেছে নেওয়া হয়েছে' টেক্সট দেখানো হয়, তারপরে একটি শেয়ার আইকন থাকে। নিচে, একটি তালিকায় বেশ কিছু আইটেম দেখানো হয়েছে, বেছে নেওয়া তিনটি আইটেমের পাশে টিকচিহ্ন দেওয়া আছে
ছবি ২. বেছে নেওয়া নির্দিষ্ট আইটেম সহ ডায়নামিক টপ অ্যাপ বারে ইন্টিগ্রেট করা তালিকা।

অতিরিক্ত রিসোর্স