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

Question

我需要在我的 Android 應用程序中添加一個工具欄，其列表如下所示。 我正在使用Jetpack Compose創建 UI。 下面是我用於繪制主視圖的可組合 function。

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

Answer 1

在 Jetpack compose Toolbar 中，可以使用名為TopAppBar的 Composable function 輕松實現。 您需要將TopAppBar與主要的可組合 function 一起放在列中。

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

上面的 function 在一個列中調用 TopAppBar，然后是您的主要內容視圖。 TopAppBar function 接受一個文本對象（不是字符串）作為標題。 這也可以是任何可組合的 function。 您還可以指定其他參數，如 backgroundColor、navigationIcon、contentColor 等。請記住，TopAppBar 只是 Jetpack 團隊提供的 Composable。 它也可以是您的自定義 function，以防您需要更多自定義。

Output

Answer 2

使用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 = {
            
        })