顶部应用栏没有投影。

Question

我在我的组合中的Scaffold中有一个TopAppBar，但它没有像它应该做的那样下落阴影：

@Composable
fun MainScreen(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = stringResource(id = R.string.appName)) },
            )
        }
    ) {
        Text("Composable content")
    }
}

即使我手动设置高程，它也不会产生任何阴影：

    TopAppBar(
        title = { Text(text = stringResource(id = R.string.appName)) },
        elevation = 4.dp
    )

如何让应用栏（AppBar）产生阴影效果？

- svprdga

Answer 1

你能在Box中试试这个吗？

Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.White,
    ) {
        Column (){
            Box(modifier = Modifier.height(80.dp)) {
                TopAppBar(
                    backgroundColor = Color.White,
                    title = { Text("Title") },
                    elevation = 10.dp
                )
            }
            Text(text = "Composable content", style = TextStyle(
                color = Color.Black
            ))
        }
    }

- tugrul altun

---

嘿，在尝试你的代码时我发现问题出在backgroundColor属性上。如果我像你的示例一样将其设置为白色，那么这个栏会投下阴影；但是如果我删除它或者将其设置为backgroundColor = MaterialTheme.colors.primary，那么就没有阴影了... - svprdga

实际上，在暗色中看到阴影是困难的，例如尝试使用黄色。 - tugrul altun

Answer 2

对于那些寻找阴影的人)

如果我们查看布局检查器，我们可以看到 topbar 将在层次结构中位于内容下方。无论您使用什么高度，都不会出现阴影。至少在 compose 1.1.1 中是这样。

因此，要查看阴影，请将 TopAppBar 从 Scaffold 参数移动到您的内容组合的底部。

Scaffold() {
Box(){
... some content
TopAppBar()
}
}

- Inliner