JetpackCompose组件介绍-Buttom app bar

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")
                }
            }