मैं Jetpack Compose के साथ टूलबार का उपयोग करना चाहता/चाहती हूं। क्या इसमें ऐसा कंपोज़ेबल कंपोनेंट है?

4
Commander Tvis 24 जिंदा 2020, 17:36

3 जवाब

TopAppBar एक पूर्व-निर्धारित कंपोज़ेबल है जो आपको जो चाहिए उसे पूरा करने में मदद करेगा। TopAppBar को जोड़ने के लिए बुनियादी सामग्री डिज़ाइन मचान प्राप्त करने के लिए आप Scaffold के साथ इसका उपयोग कर सकते हैं।

इसका उपयोग कैसे करें, यह देखने के लिए विस्तृत टिप्पणियों के साथ यहां एक उदाहरण दिया गया है - https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/1f843cb2bf18b9988a0dfc0611b631f216f216f main/java/com/example/jetpackcompose/material/FixedActionButtonActivity.kt#L70

उपभोग करने में आसान बनाने के लिए इसे यहां कॉपी करें

// Scaffold is a pre-defined composable that implements the basic material design visual
    // layout structure. It takes in child composables for all the common elements that you see
    // in an app using material design - app bar, bottom app bar, floating action button, etc. It
    // also takes care of laying out these child composables in the correct positions - eg bottom
    // app bar is automatically placed at the bottom of the screen even though I didn't specify
    // that explicitly.
    Scaffold(
        scaffoldState = scaffoldState,
        topAppBar = { TopAppBar(title = { Text("Scaffold Examples") }) },
        bottomAppBar = { fabConfiguration ->
            // We specify the shape of the FAB bu passing a shape composable (fabShape) as a
            // parameter to cutoutShape property of the BottomAppBar. It automatically creates a
            // cutout in the BottomAppBar based on the shape of the Floating Action Button.
            BottomAppBar(fabConfiguration = fabConfiguration, cutoutShape = fabShape) {}
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {},
                // We specify the same shape that we passed as the cutoutShape above.
                shape = fabShape,
                // We use the secondary color from the current theme. It uses the defaults when
                // you don't specify a theme (this example doesn't specify a theme either hence
                // it will just use defaults. Look at DarkModeActivity if you want to see an
                // example of using themes.
                backgroundColor = MaterialTheme.colors.secondary
            ) {
                IconButton(onClick = {}) {
                    Icon(asset = Icons.Filled.Favorite)
                }
            }
        },
        floatingActionButtonPosition = Scaffold.FabPosition.CenterDocked,
        bodyContent = { modifier ->
            // Vertical scroller is a composable that adds the ability to scroll through the
            // child views
            VerticalScroller {
                // Column is a composable that places its children in a vertical sequence. You
                // can think of it similar to a LinearLayout with the vertical orientation.
                Column(modifier) {
                    repeat(100) {
                        // Card composable is a predefined composable that is meant to represent
                        // the card surface as specified by the Material Design specification. We
                        // also configure it to have rounded corners and apply a modifier.
                        Card(color = colors[it % colors.size],
                            shape = RoundedCornerShape(8.dp),
                            modifier = Modifier.padding(8.dp)
                        ) {
                            Spacer(modifier = Modifier.fillMaxWidth() + Modifier.preferredHeight(200.dp))
                        }
                    }
                }
            }
        }
    )
2
Vinay Gaba 24 मई 2020, 02:36

हाँ, यह TopAppBar (androidx.ui.material में) है। यह आपको एक शीर्षक, रंग, नेविगेशन आइकन और क्रियाओं को निर्दिष्ट करने की अनुमति देता है। अधिक जानकारी के लिए दस्तावेज देखें।

2
Ryan M 24 जिंदा 2020, 22:15

1.0.0-beta02 के साथ आप TopAppBar.

Scaffold के साथ इसका उपयोग करना सबसे अच्छा तरीका है। कुछ इस तरह:

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(text = "TopAppBar")
            },
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(Icons.Filled.Menu,"")
                }
            },
            backgroundColor = Color.Blue,
            contentColor = Color.White,
            elevation = 12.dp
        )
    }, content = {
        
    })

enter image description here

9
Gabriele Mariotti 17 मार्च 2021, 21:31