ऐप्लिकेशन के सबसे ऊपर डाइनैमिक बार बनाना

इस गाइड में, 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"
                    )
                }
            }
        },
    )
}
AppBar.kt

कोड के बारे में अहम जानकारी

• 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
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

कोड के बारे में अहम जानकारी

• चुने गए आइटम की संख्या के हिसाब से, सबसे ऊपर मौजूद बार अपडेट होता है.
• selectedItems में चुने गए आइटम के इंडेक्स का सेट होता है.
• AppBarMultiSelectionExample, स्क्रीन को स्ट्रक्चर करने के लिए Scaffold का इस्तेमाल करता है.
  • topBar = { AppBarSelectionActions(selectedItems) }, AppBarSelectionActions कंपोज़ेबल को टॉप ऐप्लिकेशन बार के तौर पर सेट करता है. AppBarSelectionActions को selectedItems की स्थिति मिलती है.
• LazyColumn, आइटम को वर्टिकल सूची में दिखाता है. इससे सिर्फ़ वे आइटम रेंडर होते हैं जो स्क्रीन पर दिखते हैं.
• ListItemSelectable से, चुने जा सकने वाले सूची आइटम का पता चलता है.
  • combinedClickable से, आइटम चुनने के लिए क्लिक और ज़्यादा देर तक क्लिक करने, दोनों की सुविधा मिलती है. क्लिक करने से कोई कार्रवाई होती है, जबकि किसी आइटम पर देर तक क्लिक करने से, उसे चुनने की स्थिति टॉगल होती है.

नतीजा

दूसरी इमेज. डाइनैमिक टॉप ऐप्लिकेशन बार में इंटिग्रेट की गई सूची, जिसमें कुछ आइटम चुने गए हैं.

अन्य संसाधन

• TopAppBar
• LazyColumn
• Scaffold