Material Components Android中BottomSheet的Edge-to-Edge适配问题解析

问题背景

在Material Components Android库中，当应用使用继承自Widget.Material3.BottomSheet.Modal的自定义主题并针对SDK 35及以上版本时，会出现系统导航栏区域出现空白间隙的问题。这是由于Android 15开始强制要求应用实现edge-to-edge设计，而BottomSheet的默认样式未完全适配这一变化所致。

技术原理分析

Edge-to-edge是Android平台的一项重要设计规范，要求应用内容延伸到系统栏(状态栏和导航栏)下方。从Android 15开始，这一设计成为强制要求。对于BottomSheet组件：

1. Widget.Material3.BottomSheet.Modal是BottomSheet的默认样式定义
2. 该样式默认未启用enableEdgeToEdge属性
3. 当应用主题继承此样式且目标SDK≥35时，系统会强制edge-to-edge
4. 由于样式未适配，导致导航栏区域出现空白

解决方案

Material Components团队提供了两种解决方案：

1. 使用正确的主题继承链：不应直接继承Widget.Material3.BottomSheet.Modal，而应使用ThemeOverlay.Material3.BottomSheetDialog作为基础。这是库中推荐的BottomSheet对话框主题。

2. 手动添加edge-to-edge支持：如果必须自定义样式，可以在样式中显式添加：

   <item name="enableEdgeToEdge">true</item>
   

最佳实践建议

1. 对于新项目，直接使用ThemeOverlay.Material3.BottomSheetDialog作为BottomSheet的基础主题
2. 现有项目迁移时，检查所有自定义BottomSheet样式是否继承自正确的基础主题
3. 针对Android 15及以上版本进行充分测试，确保所有对话框和BottomSheet组件都正确实现了edge-to-edge
4. 注意处理系统栏区域的内容避让，确保重要UI元素不会被遮挡

实现示例

以下是正确的BottomSheet样式定义方式：

<style name="MyBottomSheet" parent="ThemeOverlay.Material3.BottomSheetDialog">
    <!-- 自定义样式属性 -->
</style>

总结

Material Components Android库正在不断完善对最新Android平台特性的支持。开发者在使用BottomSheet等组件时，应注意遵循库推荐的主题继承方式，特别是针对新平台特性如edge-to-edge设计的适配。通过使用正确的主题基础，可以避免布局问题并确保应用符合最新的设计规范。