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