TopAppBar

首先看看TopAppBar的参数：有两种参数类型

TopAppBar(modifier: Modifier = Modifier,//布局修饰backgroundColor: Color = MaterialTheme.colors.primarySurface,//appbar背景颜色contentColor: Color = contentColorFor(backgroundColor),//子级内容颜色elevation: Dp = AppBarDefaults.TopAppBarElevation,//标题栏阴影效果contentPadding: PaddingValues = AppBarDefaults.ContentPadding,//内边距content: @Composable RowScope.() -> Unit//appbar的内容，默认布局是Row，内容将被水平放置
)
TopAppBar(title: @Composable () -> Unit,//appbar的中心标题modifier: Modifier = Modifier,//布局修饰navigationIcon: @Composable (() -> Unit)? = null,//导航图标actions: @Composable RowScope.() -> Unit = {},//其他行为，例如设置，分享等backgroundColor: Color = MaterialTheme.colors.primarySurface,//appbar背景颜色contentColor: Color = contentColorFor(backgroundColor),//子级内容颜色elevation: Dp = AppBarDefaults.TopAppBarElevation//标题栏阴影效果
)

简单使用：

@Composable
fun BarTest() {val context = LocalContext.currentColumn(modifier = Modifier.fillMaxSize().background(Color.LightGray)) {//自定义的appbarTopAppBar(modifier = Modifier.fillMaxWidth(),backgroundColor = Color.White,//背景色contentColor = Color.Red, //子级内容颜色contentPadding = PaddingValues(4.dp)//AppBar的内边距) {//返回按钮IconButton(onClick = { Toast.makeText(context, "返回", Toast.LENGTH_SHORT).show() }) {Icon(Icons.Filled.ArrowBack, null)}//标题Text("contentPadding的标题",modifier = Modifier.fillMaxWidth(0.75f).wrapContentSize(Alignment.Center))//右侧分享按钮IconButton(onClick = {Toast.makeText(context, "分享", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.Share, null)}//右侧设置按钮IconButton(onClick = {Toast.makeText(context, "设置", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.Settings, null)}}Spacer(modifier = Modifier.requiredHeight(10.dp))//有标题、导航图标和动作的插槽TopAppBar(//标题title = {Text("有actions的标题",modifier = Modifier.fillMaxWidth().wrapContentSize(Alignment.Center)//设置标题文本居中显示)},//布局修饰modifier = Modifier.fillMaxWidth(),//导航图标（返回icon键）navigationIcon = {IconButton(onClick = {Toast.makeText(context, "返回", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.ArrowBack, null)}},//其他行为（分享，设置等）actions = {IconButton(onClick = {Toast.makeText(context, "分享", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.Share, null)}IconButton(onClick = {Toast.makeText(context, "设置", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.Settings, null)}},backgroundColor = Color.White,//背景色contentColor = Color.Red, //子级内容颜色)Spacer(modifier = Modifier.requiredHeight(10.dp))}}

效果如图：

BottomAppBar

先看看BottomAppBar参数：

BottomAppBar(modifier: Modifier = Modifier,backgroundColor: Color = MaterialTheme.colors.primarySurface,//appbar背景颜色contentColor: Color = contentColorFor(backgroundColor),//子级内容颜色cutoutShape: Shape? = null,//边框形状elevation: Dp = AppBarDefaults.BottomAppBarElevation,//标题栏阴影效果contentPadding: PaddingValues = AppBarDefaults.ContentPadding,//内边距content: @Composable RowScope.() -> Unit//默认布局是一个Row，所以里面的内容将被水平放置
)

使用：

        //底部AppbarBottomAppBar(modifier = Modifier.fillMaxWidth(1.0f).wrapContentSize(Alignment.Center),backgroundColor = Color.White,//背景色contentColor = Color.Red, //子级内容颜色) {IconButton(onClick = {Toast.makeText(context, "首页", Toast.LENGTH_SHORT).show()}, modifier = Modifier.fillMaxWidth(0.5f).wrapContentSize(Alignment.Center)) {Icon(Icons.Filled.Home, null)}IconButton(onClick = {Toast.makeText(context, "帮助", Toast.LENGTH_SHORT).show()}, modifier = Modifier.fillMaxWidth(0.5f).wrapContentSize(Alignment.Center)) {Icon(Icons.Filled.Help, null)}}

效果如图：

最后附上TopAppBar和BottomAppBar的代码：

@Composable
fun BarTest() {val context = LocalContext.currentColumn(modifier = Modifier.fillMaxSize().background(Color.LightGray)) {//自定义的appbarTopAppBar(modifier = Modifier.fillMaxWidth(),backgroundColor = Color.White,//背景色contentColor = Color.Red, //子级内容颜色contentPadding = PaddingValues(4.dp)//AppBar的内边距) {//返回按钮IconButton(onClick = { Toast.makeText(context, "返回", Toast.LENGTH_SHORT).show() }) {Icon(Icons.Filled.ArrowBack, null)}//标题Text("contentPadding的标题",modifier = Modifier.fillMaxWidth(0.75f).wrapContentSize(Alignment.Center))//右侧分享按钮IconButton(onClick = {Toast.makeText(context, "分享", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.Share, null)}//右侧设置按钮IconButton(onClick = {Toast.makeText(context, "设置", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.Settings, null)}}Spacer(modifier = Modifier.requiredHeight(10.dp))//有标题、导航图标和动作的插槽TopAppBar(//标题title = {Text("有actions的标题",modifier = Modifier.fillMaxWidth().wrapContentSize(Alignment.Center)//设置标题文本居中显示)},//布局修饰modifier = Modifier.fillMaxWidth(),//导航图标（返回icon键）navigationIcon = {IconButton(onClick = {Toast.makeText(context, "返回", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.ArrowBack, null)}},//其他行为（分享，设置等）actions = {IconButton(onClick = {Toast.makeText(context, "分享", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.Share, null)}IconButton(onClick = {Toast.makeText(context, "设置", Toast.LENGTH_SHORT).show()}) {Icon(Icons.Filled.Settings, null)}},backgroundColor = Color.White,//背景色contentColor = Color.Red, //子级内容颜色)Spacer(modifier = Modifier.requiredHeight(10.dp))//底部AppbarBottomAppBar(modifier = Modifier.fillMaxWidth(1.0f).wrapContentSize(Alignment.Center),backgroundColor = Color.White,//背景色contentColor = Color.Red, //子级内容颜色) {IconButton(onClick = {Toast.makeText(context, "首页", Toast.LENGTH_SHORT).show()}, modifier = Modifier.fillMaxWidth(0.5f).wrapContentSize(Alignment.Center)) {Icon(Icons.Filled.Home, null)}IconButton(onClick = {Toast.makeText(context, "帮助", Toast.LENGTH_SHORT).show()}, modifier = Modifier.fillMaxWidth(0.5f).wrapContentSize(Alignment.Center)) {Icon(Icons.Filled.Help, null)}}}}

Jetpack Compose——TopAppBar（顶部应用程序栏）、BottomAppBar（底部应用程序栏）相关推荐

Jetpack Compose 无限加载列表（滚到底部自动加载更多）
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging ...
Jetpack Compose教程-水位控制小部件
Jetpack Compose教程-水位控制小部件 Apple的应用程序和小部件一直是设计的典范,也给我们的"复制系列:活动应用"和"卡片应用"提供了灵感.当他 ...
Android进阶之路 - 顶部状态栏、底部虚拟导航栏相关操作
快过年了,2018希望我们每个人都健康,开心,同时继续上进 ! 2020补充:基本包含了我几年在开发中用到的关于顶部状态栏和底部导航栏的绝大部分功能 ~ 顶部状态栏状态栏是否可见获取状态栏高度隐 ...
小程序scroll-view，滚动到最低_小程序滚动到底部
小程序scroll-view,滚动到最低_小程序滚动到底部小程序滚动条,滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view:组件要固定高度. scro ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
Jetpack Compose中的Accompanist
accompanist是Jetpack Compose官方提供的一个辅助工具库,以提供那些在Jetpack Compose sdk中目前还没有的功能API. 权限依赖配置: repositories ...
安卓开发： Jetpack compose + kotlin 实现俄罗斯方块游戏
文章目录前言俄罗斯方块开发文档 1.摘要 2.开发工具选取 2.1.Compose 的自身优点 2.2.数据驱动界面 3.设计需求 3.1.功能需求 3.1.1.基本游戏功能 3.1.2.拓展功能 ...
Jetpack compose 康奈尔笔记
快速上手条目内容是什么原生Android界面构建工具包优势 -更少的代码 -直观(状态变化,自动更新界面) -可以预览 -Material design 什么是可组合函数 -用函数描述外观和 ...

Jetpack Compose——TopAppBar（顶部应用程序栏）、BottomAppBar（底部应用程序栏）

TopAppBar

BottomAppBar

Jetpack Compose——TopAppBar（顶部应用程序栏）、BottomAppBar（底部应用程序栏）相关推荐

最新文章

热门文章