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

इस गाइड में, 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 लैम्डा, आइकॉन पर क्लिक करने पर शेयर करने की कार्रवाई को हैंडल करता है.

नतीजा

डाइनैमिक टॉप ऐप्लिकेशन बार में, शेयर आइकॉन के साथ &#39;चुने गए तीन आइटम&#39; टेक्स्ट दिखता है. यह टेक्स्ट और आइकॉन सिर्फ़ तब दिखता है, जब आइटम चुने जाते हैं
पहली इमेज. टेक्स्ट और शेयर आइकॉन वाला डाइनैमिक टॉप ऐप्लिकेशन बार. यह सिर्फ़ तब दिखता है, जब आइटम चुने जाते हैं.

चुनी जा सकने वाली सूची को डाइनैमिक टॉप ऐप्लिकेशन बार में इंटिग्रेट करें

इस उदाहरण में, डाइनैमिक टॉप ऐप्लिकेशन बार में चुनने लायक सूची जोड़ने का तरीका बताया गया है:

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

नतीजा

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

अन्य संसाधन