如何在 Jetpack Compose 中添加工具栏？答案

【问题标题】：How can i add a Toolbar in Jetpack Compose?如何在 Jetpack Compose 中添加工具栏？
【发布时间】：2021-03-03 17:51:45
【问题描述】：

我需要在我的 Android 应用程序中添加一个带有如下列表的工具栏。我正在使用 Jetpack Compose 创建用户界面。下面是我用来绘制主视图的可组合函数。

@Composable
fun HomeScreenApp() {
    showPetsList(dogs = dogData)
}

【问题讨论】：

标签： android android-layout android-toolbar android-jetpack android-jetpack-compose

【解决方案1】：

使用1.0.0（使用1.0.0-beta07 测试）您可以使用TopAppBar。

最好的方法是使用Scaffold。比如：

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

【讨论】：

【解决方案2】：

在 Jetpack compose Toolbar 中，可以使用名为 TopAppBar 的 Composable 函数轻松实现。您需要将 TopAppBar 与您的主要可组合函数一起放在一个列中。

@Composable
fun HomeScreenApp() {
    Column() {
        TopAppBar(title = { Text(text = "Adopt Me") }, backgroundColor = Color.Red)
        showPetsList(dogs = dogData)
    }
}

上述函数调用列内的 TopAppBar，然后是主内容视图。 TopAppBar 函数接受一个文本对象（不是字符串）作为标题。这也可以是任何可组合函数。您还可以指定其他参数，如 backgroundColor、navigationIcon、contentColor 等。请记住，TopAppBar 只是 Jetpack 团队提供的 Composable。它也可以是您的自定义函数，以防您需要更多自定义。

输出

【讨论】：