এই নির্দেশিকা 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ব্লকটি সেইসব অ্যাকশনকে সংজ্ঞায়িত করে যা আপনি অ্যাপের সবচেয়ে উপরের বারে দেখান। IfhasSelectionসত্য হলে, টেক্সটের পরে একটি শেয়ার আইকন দেখা যায়।- আপনি আইকনে ক্লিক করলে,
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কম্পোজ করার উপযুক্ত আইটেম সেট করে।AppBarSelectionActionsselectedItemsস্ট্যাটাস পায়।
LazyColumnআইটেমগুলিকে একটি উল্লম্ব তালিকায় দেখায়, শুধুমাত্র স্ক্রিনে দেখা যাওয়া আইটেমগুলি রেন্ডার করে।ListItemSelectableদিয়ে বেছে নেওয়ার উপযুক্ত তালিকার আইটেম বোঝানো হয়।combinedClickableআইটেম বেছে নেওয়ার জন্য ক্লিক ও দীর্ঘ-ক্লিক, দুটিই হ্যান্ডেল করতে দেয়। ক্লিক করলে কোনও অ্যাকশন পারফর্ম করা হয়, তবে কোনও আইটেমে লং-ক্লিক করলে সেটির বেছে নেওয়ার স্ট্যাটাস টগল হয়।
ফলাফল