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

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

ডায়নামিক টপ অ্যাপ বার আচরণ বাস্তবায়ন করুন

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

@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 ব্লকটি উপরের অ্যাপ বারে আপনার প্রদর্শিত অ্যাকশনগুলিকে সংজ্ঞায়িত করে। যদি 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 আইটেম নির্বাচনের জন্য ক্লিক এবং লং-ক্লিক উভয় হ্যান্ডলিং করার সুযোগ দেয়। একটি ক্লিক একটি ক্রিয়া সম্পাদন করে, অন্যদিকে একটি আইটেমে দীর্ঘ-ক্লিক করলে তার নির্বাচনের অবস্থা টগল হয়।

ফলাফল

একটি ডায়নামিক টপ অ্যাপ বার "Selected 3 items" লেখাটি প্রদর্শন করে, তারপরে একটি শেয়ার আইকন থাকে। নীচে, একটি তালিকা বেশ কয়েকটি আইটেম দেখায়, নির্বাচিত তিনটির পাশে চেকমার্ক সহ।
চিত্র ২। নির্দিষ্ট আইটেমগুলি নির্বাচিত করে একটি গতিশীল শীর্ষ অ্যাপ বারে একত্রিত একটি তালিকা।

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