JetpackCompose组件介绍-Buttom app bar
·115 words
Table of Contents
此图片来自Material You 官网
Buttom app bar 只是一个载体,里面的内容是可以自定义的。 #
本文章按照Material You官网给出的要求来
底部应用栏在移动屏幕底部显示导航和关键操作。
我们先观察Buttom app bar里面的组成,从左至右依次是四个IconButton,最右边则是一个FloatingActionButton
首先添加一个Buttom app bar组件
@Composable
fun ButtomAppBar(
)
在里面添加四个IconButton,你也可以添加其他的东西。
@Composable
fun ButtomAppBar(
actions = {
IconButton(onClick = { /* doSomething() */ }) {
Icon(
Icons.Filled.Search,
contentDescription = "Description"
)
}
IconButton(onClick = { /* doSomething() */ }) {
Icon(
Icons.Filled.DeleteOutline,
contentDescription = "Description",
)
}
IconButton(onClick = { /* doSomething() */ }) {
Icon(
Icons.Outlined.Archive,
contentDescription = "Description",
)
}
IconButton(onClick = { /* doSomething() */ }) {
Icon(
Icons.Filled.TurnRight,
contentDescription = "Description",
)
}
},
)
再添加一个FloatingActionButton
floatingActionButton = {
FloatingActionButton(
onClick = { /* do something */ },
containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
) {
Icon(Icons.Filled.Add, "Description")
}
}