android - 为什么 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：我的坏 - 阴影按预期工作。我只是没有正确检查。默认阴影很难在视觉上检测到：

标签： androidandroid-jetpack-composematerial-components-androidappbar

Answer 1

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

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

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

结果