我需要在我的 Android 应用程序中添加一个工具栏,其中包含如下所示的列表。我正在使用 Jetpack Compose 创建 UI。下面是我用来绘制主视图的可组合函数。
@Composable
fun HomeScreenApp() {
showPetsList(dogs = dogData)
}
TopAppBar
。
最好的方法是使用
Scaffold
。比如:
Scaffold(
topBar = {
TopAppBar(
title = {
Text(text = "TopAppBar")
},
navigationIcon = {
IconButton(onClick = { }) {
Icon(Icons.Filled.Menu,"")
}
},
backgroundColor = ....,
contentColor = ....
)
}, content = {
})
在 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。它也可以是您的自定义功能,以防您需要更多自定义功能。
输出
可重复使用的自定义工具栏jetpack组成
@Composable fun CustomToolbarScreen(navController: NavHostController, title: String, isBack: Boolean){
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
var isDrawerOpen = remember {
mutableStateOf(false)
}
TopAppBar(
colors = TopAppBarDefaults.smallTopAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(text = title,color = Color.Black,
fontSize = 18.sp)
},
modifier = Modifier.background(colorPrimary),
navigationIcon = {
if (isBack){
IconButton(onClick = {navController.navigateUp()}) {
Icon(Icons.Filled.ArrowBack, "backIcon")
}
}else{
IconButton(onClick = {
scope.launch {
scaffoldState.drawerState.open()
Log.i("Drawer", "drawer Open: ")
}
}) {
Icon(Icons.Filled.Menu, "backIcon")
}
}
}
)}
更多详情请访问此链接 自定义工具栏