Jetpack Compose - TopAppBar 底线

Question

我有TopAppBar：

   MaterialTheme {
    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
        ),
    )
}

它看起来符合预期，但唯一缺少的是它下面的底线。我认为通常是通过增加高度来实现的。我尝试添加海拔，但它没有改变任何东西。它的背景是白色的，下面的背景也是白色的，它看起来不像工具栏。有没有办法明确添加它？

Answer 1

您可以添加一个

Surface()

作为您的

TopAppBar

的父级，以实现

elevation

。默认的

AppBar()

可组合 没有。

我的建议是这样的：

) { //upper end of something else
    Surface(elevation = 8.dp) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(56.dp)
                .background(color = background),
            )
          }
        }
      }

Answer 2

解决了这个问题，这是我对此的想法：

我的 TopAppBar 位于 ComposeView 内，已添加到 xml 布局中。 TopAppBar 占据视图的所有高度，并且由于 TopAppBar 下面的下一个视图是 xml 视图，因此 compose 视图的高度不能应用于 xml 视图。 所以我最终在 TopAppBar 下面添加了 Spacer

这是我的可组合工作解决方案：

MaterialTheme {
  Column {
    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
        ),
    )
    Spacer(modifier = Modifier.height(16.dp))
}

Answer 3

默认情况下，AppBar具有elevation属性： [1]：

然后你可以通过在高程属性中添加负值来解决这个问题： [2]：