Jetpack Compose Scaffold和TopAppBar(顶部导航)
compose
compose - Docker Compose是一个用于定义和运行多容器Docker应用程序的工具,通过Compose文件格式简化应用部署过程。
项目地址:https://gitcode.com/gh_mirrors/compose/compose
免费下载资源
·
Jetpack Compose 以下简称JC
JC提供了Scaffold这个组件来实现一些导航的效果,例如顶部菜单,底部导航,旁边的抽屉菜单等等,Scaffold的意思是脚手架,也就是Scaffold这是提供的一个支架,或者说固定了一些控件实现的位置。下面通过实现TopAppBar来说明。
TopAppBar有两种实现方式,下面这个是一种实现方式。
@Composable
public fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier,
navigationIcon: @Composable() (() -> Unit)?,
actions: @Composable() (RowScope.() -> Unit),
backgroundColor: Color,
contentColor: Color,
elevation: Dp
): Unit
还有第二种实现方式:
@Composable
public fun TopAppBar(
modifier: Modifier,
backgroundColor: Color,
contentColor: Color,
elevation: Dp,
contentPadding: PaddingValues,
content: @Composable() (RowScope.() -> Unit)
): Unit
两者方式的区别就是,第一种方式是已经做了限制的,内部Icon和文本的位置都有一定的限制,而第二种方式实际上是完全的自定义样式,需要自己手动设置位置,总的来说,还是推荐使用第一种比较方便。下面举例说明。
第一种方式:
看注释,写的非常清楚了,这种方式标题部分非常容易居中对齐,第二种方式可能出现问题。
TopAppBar(
//标题
title = {
Text(
modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center),
text = "TODO"
)
},
//导航按钮,一般为返回按钮
navigationIcon = {
IconButton(onClick = { println("返回") }) {
Icon(imageVector = Icons.Default.ArrowBack, contentDescription = null)
}
},
//其它按钮
actions = {
IconButton(onClick = { println("分享") }) {
Icon(imageVector = Icons.Default.Share, contentDescription = null)
}
IconButton(onClick = { println("设置") }) {
Icon(imageVector = Icons.Default.Settings, contentDescription = null)
}
},
//背景色
backgroundColor = Color(0xffffffaa),
//内容颜色
contentColor = Color.Black,
//底部阴影
elevation = 5.dp
)
第二种方式的需要完全自定义控件,特别是标题Text的fillMaxWidth()方法,如果设置为1.0f,那么左边的按钮将看不到,如果写一个比例如0.8又可能出现位置的偏差,还是比较难以看着控制的,可能需要别的约束控件来约束位置,那样的话就比第一种方式麻烦的多。
TopAppBar(contentColor = Color.Black, backgroundColor = Color.Red) {
//返回按钮
IconButton(onClick = { }) {
Icon(Icons.Filled.ArrowBack, null)
}
Text(text = "TODO", modifier = Modifier.fillMaxWidth(0.9f).wrapContentSize(Alignment.Center))
IconButton(onClick = { println("分享") }) {
Icon(Icons.Default.Share, null)
}
IconButton(onClick = { println("设置") }) {
Icon(Icons.Default.Settings, null)
}
}
GitHub 加速计划 / compose / compose
42
5
下载
compose - Docker Compose是一个用于定义和运行多容器Docker应用程序的工具,通过Compose文件格式简化应用部署过程。
最近提交(Master分支:4 个月前 )
8f644eea
Signed-off-by: Nicolas De Loof <nicolas.deloof@gmail.com>
8 天前
56e92e34
Signed-off-by: Guillaume Lours <705411+glours@users.noreply.github.com>
9 天前
更多推荐
已为社区贡献9条内容
所有评论(0)