इस गाइड में, 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की वैल्यू सही है, तो टेक्स्ट के बाद शेयर करने का आइकॉन दिखता है.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कंपोज़ेबल को टॉप ऐप्लिकेशन बार के तौर पर सेट करता है.AppBarSelectionActionsकोselectedItemsकी स्थिति मिलती है.
LazyColumn, आइटम को वर्टिकल सूची में दिखाता है. इससे सिर्फ़ वे आइटम रेंडर होते हैं जो स्क्रीन पर दिखते हैं.ListItemSelectableसे, चुने जा सकने वाले सूची आइटम का पता चलता है.combinedClickable, आइटम चुनने के लिए क्लिक और ज़्यादा देर तक क्लिक करने की सुविधा देता है. क्लिक करने से कोई कार्रवाई होती है, जबकि किसी आइटम पर देर तक क्लिक करने से, उसे चुनने की स्थिति टॉगल होती है.
नतीजा