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

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

नतीजा

ऐप्लिकेशन के सबसे ऊपर मौजूद डाइनैमिक बार में, शेयर आइकॉन के साथ &#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(
        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;तीन आइटम चुने गए&#39; टेक्स्ट के बाद शेयर आइकॉन दिखता है. यहां एक सूची में कई आइटम दिख रहे हैं. चुने गए तीन आइटम के बगल में सही का निशान दिख रहा है
दूसरी इमेज. डाइनैमिक टॉप ऐप्लिकेशन बार में इंटिग्रेट की गई सूची, जिसमें कुछ आइटम चुने गए हैं.

अन्य संसाधन