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