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 天前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐