如何避免模态底部工作表与 Android 中的系统导航图标重叠

Question

Material3 模态底部表单当前与系统导航按钮重叠。有没有办法避免与系统导航按钮重叠。

这是我用来显示模态底部工作表的代码

@Composable
fun TestScreen() {
    var sheetOpened by mutableStateOf(false)

    Scaffold() {
       Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
         Button(onClick = { sheetOpened = true }){
              Text("Open Bottom Sheet")  
          }
       }
    }

    if(sheetOpened){
        ModalBottomSheet(onDismissRequest = {sheetOpened = false}){
            Box(Modifier.fillMaxWidth().height(500.dp).background(Color.RED))
        }
    }
}

尝试将模态底板放入脚手架内，但这也不起作用。

Answer 1

对我来说，我在 MainActivity 中调用了 androidx.activity.enableEdgeToEdge.enableEdgeToEdge() 函数。这会导致您的 UI 根据此处找到的文档绘制在底部导航和系统栏后面： https: //developer.android.com/develop/ui/views/layout/edge-to-edge

删除 enableEdgeToEdge() 调用为我解决了这个问题。

希望这可以帮助。