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

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

नतीजा

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

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

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

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

नतीजा

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

अन्य संसाधन