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

Question

我需要在我的 Android 应用程序中添加一个工具栏，其中包含如下所示的列表。我正在使用Jetpack Compose创建 UI。下面是我用来绘制主视图的可组合函数。

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

Answer 1

您可以使用TopAppBar.

最好的方法是使用Scaffold. 就像是：

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

Answer 2

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

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

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

输出