এই নির্দেশিকা ব্যাখ্যা করে যে কীভাবে 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সত্য হলে, টেক্সটের পরে শেয়ার করার আইকন দেখানো হয়।- আপনি আইকনে ক্লিক করলে
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আইটেম বেছে নেওয়ার জন্য ক্লিক ও দীর্ঘ-ক্লিক, দুটিই হ্যান্ডেল করার অনুমতি দেয়। ক্লিক করলে কোনও অ্যাকশন পারফর্ম করা হয়, তবে কোনও আইটেমে বেশিক্ষণ ক্লিক করে থাকলে সেটি বেছে নেওয়ার স্ট্যাটাস টগল করা হয়।
ফলাফল