android - Android Jetpack Compose 是否支持工具栏小部件？

Question

我想将 Toolbar 与 Jetpack Compose 一起使用。它有这样的 Composable 组件吗？

Answer 1

与1.0.x您一起可以使用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 = {
        
    })

Answer 2

使用

compose_version = '1.0.0-beta01'

TopAppBar(
        title = {
            Text(text = "Pets Show")
        },
        navigationIcon = {
            IconButton(onClick = { }) {
                Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu Btn")
            }
        },
        backgroundColor = Color.Transparent,
        contentColor = Color.Gray,
        elevation = 2.dp
    )

Answer 3

是的，它是TopAppBar（在androidx.ui.material）。它允许您指定标题、颜色、导航图标和操作。有关更多信息，请参阅文档。

Answer 4

TopAppBar是一个预定义的可组合，可以帮助你完成你想要的。您可以使用它Scaffold来获得基本的材料设计脚手架来连接 TopAppBar。

这是一个带有详细注释的示例，以查看如何使用它 - https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/1f843cb2bf18b9988a0dfc611b631f216f02149e/app/src/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))
                        }
                    }
                }
            }
        }
    )