为什么 Jetpack Compose AppBar 会重叠它的影子

Question

我希望 AppBar 在底部边缘下方显示默认阴影，但由于某些原因，appbar 剪裁了它的阴影：

查看从 LayoutInspector 捕获的层次结构：

我的代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.Cyan,
                ) {
                    Box {
                        TopAppBar(
                            title = { Text("AppBar title") }
                        )
                    }
                }
            }
        }
    }
}

为什么 AppBar 的影子会这样？我使用不正确吗？我该如何解决这个问题？

UPD：我的坏影子按预期工作。我只是没有正确检查它。默认阴影很难在视觉上检测到：

Answer 1

尝试将此代码 modifier = Modifier.fillMaxSize() 添加到 Box。 Box 在你的代码中削减你的影子

示例（我在那里添加了白色以更好地看到阴影）

Surface(
    modifier = Modifier.fillMaxSize(),
    color = Color.White,
) {
    Box(modifier = Modifier.fillMaxSize()) {
        TopAppBar(
            backgroundColor = Color.White,
            title = { Text("AppBar title") }
        )
    }
}

结果

为什么 Jetpack Compose AppBar 会重叠它的影子

Why Jetpack Compose AppBar overlaps its shadow

android

appbar

material-components-android

android-jetpack-compose