इस गाइड में, 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" ) } } }, ) }
कोड के बारे में अहम जानकारी
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( 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
से, आइटम चुनने के लिए क्लिक और ज़्यादा देर तक क्लिक करने, दोनों की सुविधा मिलती है. क्लिक करने से कोई कार्रवाई होती है, जबकि किसी आइटम पर देर तक क्लिक करने से, उसे चुनने की स्थिति टॉगल होती है.
नतीजा
