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