এই নির্দেশিকাটি ব্যাখ্যা করে যে কীভাবে কম্পোজে একটি ডায়নামিক শীর্ষ অ্যাপ বার তৈরি করা যায় যা তালিকা থেকে আইটেম নির্বাচন করা হলে তার বিকল্পগুলি পরিবর্তন করে। আপনি নির্বাচনের অবস্থার উপর ভিত্তি করে শীর্ষ অ্যাপ বারের শিরোনাম এবং ক্রিয়াগুলি সংশোধন করতে পারেন৷
ডায়নামিক শীর্ষ অ্যাপ বার আচরণ প্রয়োগ করুন
এই কোডটি শীর্ষ অ্যাপ বারের জন্য একটি সংমিশ্রণযোগ্য ফাংশন সংজ্ঞায়িত করে যা আইটেম নির্বাচনের উপর ভিত্তি করে পরিবর্তিত হয়:
@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" ) } } }, ) }
কোড সম্পর্কে মূল পয়েন্ট
-
AppBarSelectionActions
নির্বাচিত আইটেম সূচকের একটিSet
গ্রহণ করে। - কোন আইটেম নির্বাচন করা হয়েছে কিনা তার উপর নির্ভর করে
topBarText
পরিবর্তিত হয়।- আইটেম নির্বাচন করা হলে, নির্বাচিত আইটেমের সংখ্যা বর্ণনাকারী পাঠ্য
TopAppBar
এ উপস্থিত হয়। - যদি কোনো আইটেম নির্বাচন না করা হয় তাহলে
topBarText
হল "আইটেমের তালিকা"।
- আইটেম নির্বাচন করা হলে, নির্বাচিত আইটেমের সংখ্যা বর্ণনাকারী পাঠ্য
-
actions
ব্লক শীর্ষ অ্যাপ বারে প্রদর্শিত ক্রিয়াগুলিকে সংজ্ঞায়িত করে।hasSelection
সত্য হলে, পাঠ্যের পরে একটি শেয়ার আইকন প্রদর্শিত হবে। -
IconButton
এরonClick
lambda আইকনে ক্লিক করলে শেয়ার অ্যাকশন পরিচালনা করে।
ফলাফল
ডায়নামিক শীর্ষ অ্যাপ বারে নির্বাচনযোগ্য তালিকা একত্রিত করুন
এই উদাহরণটি দেখায় কিভাবে একটি ডায়নামিক টপ অ্যাপ বারে একটি নির্বাচনযোগ্য তালিকা যোগ করতে হয়:
@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( 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
আইটেম নির্বাচনের জন্য ক্লিক এবং দীর্ঘ-ক্লিক উভয় পরিচালনার অনুমতি দেয়। একটি ক্লিক একটি ক্রিয়া সম্পাদন করে, যখন একটি আইটেম দীর্ঘ-ক্লিক করা তার নির্বাচনের অবস্থাকে টগল করে।
-