একটি ডায়নামিক শীর্ষ অ্যাপ বার তৈরি করুন

এই নির্দেশিকাটি ব্যাখ্যা করে যে কীভাবে কম্পোজে একটি ডায়নামিক শীর্ষ অ্যাপ বার তৈরি করা যায় যা তালিকা থেকে আইটেম নির্বাচন করা হলে তার বিকল্পগুলি পরিবর্তন করে। আপনি নির্বাচনের অবস্থার উপর ভিত্তি করে শীর্ষ অ্যাপ বারের শিরোনাম এবং ক্রিয়াগুলি সংশোধন করতে পারেন৷

ডায়নামিক শীর্ষ অ্যাপ বার আচরণ প্রয়োগ করুন

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

@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"
                    )
                }
            }
        },
    )
}
AppBar.kt

কোড সম্পর্কে মূল পয়েন্ট

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

ফলাফল

চিত্র 1. পাঠ্য সহ একটি গতিশীল শীর্ষ অ্যাপ বার এবং একটি শেয়ার আইকন যা শুধুমাত্র আইটেম নির্বাচন করা হলে প্রদর্শিত হয়৷

ডায়নামিক শীর্ষ অ্যাপ বারে নির্বাচনযোগ্য তালিকা একত্রিত করুন

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

@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(
        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
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

কোড সম্পর্কে মূল পয়েন্ট

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

ফলাফল

চিত্র 2. নির্বাচিত নির্দিষ্ট আইটেম সহ একটি ডায়নামিক শীর্ষ অ্যাপ বারে সংহত একটি তালিকা।

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

• TopAppBar
• LazyColumn
• Scaffold