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

এই নির্দেশিকাটি ব্যাখ্যা করে কিভাবে 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 ব্লকটি টপ অ্যাপ বারে প্রদর্শিত অ্যাকশনগুলো নির্ধারণ করে। যদি hasSelection মান true হয়, তাহলে টেক্সটের পরে একটি শেয়ার আইকন দেখা যায়।
  • 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 মাধ্যমে আইটেম নির্বাচনের জন্য ক্লিক এবং লং-ক্লিক উভয়ই ব্যবহার করা যায়। ক্লিক করলে একটি অ্যাকশন সম্পন্ন হয়, অন্যদিকে কোনো আইটেমে লং-ক্লিক করলে সেটির নির্বাচিত অবস্থা পরিবর্তিত হয়।

ফলাফল

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

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