TopAppBar 不投影

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 投下阴影？

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
            ))
        }
    }