android - TopAppBar 不投影

Question

我的可组合项的脚手架中有一个 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
            ))
        }
    }