调整 Compose Scaffold 内边距以适应 Edge-to-Edge 模式

在开启 Edge-to-Edge 功能时调整 Compose Scaffold 的内边距

问题

当在 Compose 应用程序中启用 enableEdgeToEdge() 功能时，您可能发现 Scaffold 的内边距变得过大，导致内容区域缩小。这是由于 enableEdgeToEdge() 将导航栏设置为透明，从而导致屏幕底部的内容区域偏移。

解决方案

要解决此问题，需要调整 Scaffold 的内边距以适应 enableEdgeToEdge() 功能。以下是修改后的内边距值：

PaddingValues(start=0.dp, top=0.dp, end=0.dp, bottom=56.dp)

通过将底部内边距从 80dp 调整为 56dp，可以抵消 enableEdgeToEdge() 功能对内边距的增加。

调整步骤

要调整 Scaffold 内边距，请遵循以下步骤：

1. 在 onCreate() 方法中启用 enableEdgeToEdge() 功能：

enableEdgeToEdge()

2. 在 Scaffold 的 content 参数中设置调整后的内边距值：

content = { paddingValues ->
    // Your content goes here
}

3. 将底部内边距调整为 56dp：

PaddingValues(start=0.dp, top=0.dp, end=0.dp, bottom=56.dp)

示例代码

以下是一个示例代码，演示如何调整 Scaffold 内边距：

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)

    setContent {
        val navController = rememberNavController()

        Scaffold (
            bottomBar = {
                BottomNavBar(
                    navController = navController,
                )
            },
            content = { paddingValues ->
                NavHost(navController = navController, startDestination = startDestination, modifier = Modifier.padding(paddingValues).fillMaxSize()){
                    // Screens
                }
            }
        )
    }
}

注意

此调整可能会因设备或 Android 版本而异。建议在不同设备上进行测试以验证适当的内边距值。

常见问题解答

Q1：为什么需要调整 Scaffold 的内边距？
A1：enableEdgeToEdge() 功能使导航栏透明，从而导致内容区域偏移，因此需要调整内边距以补偿此偏移。

Q2：我应该如何确定适当的内边距值？
A2：适当的内边距值可能会根据设备和 Android 版本而有所不同，建议在不同设备上进行测试以找到最佳值。

Q3：此调整是否影响所有类型的 Scaffold？
A3：是的，此调整适用于所有类型的 Scaffold，无论其是否有底部栏。

Q4：我可以在 XML 中调整内边距吗？
A4：不可以，内边距调整必须在 Compose 代码中进行。

Q5：使用 enableEdgeToEdge() 功能有什么好处？
A5：enableEdgeToEdge() 功能可创建一种更加沉浸式的用户体验，允许内容延伸到屏幕边缘。