Jetpack Compose中如何为TopAppBar显式添加底部分割线

解决方案 #

你可以将TopAppBar和下方页面内容嵌套在Column容器中，在TopAppBar下方直接添加Divider组件实现显式底部分割线。

之前elevation参数无效是因为白色背景下阴影对比度极低，肉眼几乎不可见，显式添加分割线的适配性更强，不受上下背景色影响。
修改后的代码参考如下：

MaterialTheme {
    Column(modifier = Modifier.fillMaxSize()) {
        TopAppBar(
            backgroundColor = colorResource(
                id = if (isSearchOn == true) {
                    R.color.white
                } else {
                    R.color.blue
                }
            ),
            title = {
                if (isSearchOn == true) {
                    TextField()
                }
            },
            navigationIcon = {
                BackButton()
            },
            contentColor = colorResource(
                id = if (isSearchOn == true)
                    R.color.grey else
                    R.color.white
            ),
            elevation = 0.dp
        )
        // 自定义分割线样式
        Divider(
            modifier = Modifier.fillMaxWidth(),
            color = colorResource(id = R.color.light_grey),
            thickness = 1.dp
        )
        // 下方原有页面内容放在此处即可
        YourPageContent()
    }
}

如果你使用的是Material 3版本的TopAppBar，还可以直接通过modifier的bottomBorder参数配置分割线，无需额外嵌套Column：

TopAppBar(
    // 其他原有配置保持不变
    modifier = Modifier
        .fillMaxWidth()
        .bottomBorder(
            width = 1.dp,
            color = colorResource(id = R.color.light_grey)
        )
)

内容的提问来源于stack exchange，提问作者Rainmaker