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

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