Compose 适配 - 全屏显示 EdgeToEdge

Jomurphys2025-12-19 9:59

官方页面

参考文章

一、概念

edge-to-edge 就是将APP的内容延伸到系统栏区域（状态栏、导航栏、刘海），提供更沉浸的体验。

二、实现

2.1 设置全屏显示

Android 15（API 35）开始会强制开启，更低版本需要在 Activity 的 onCreate() 中调用 enableEdgeToEdge() 方法（最低支持到 Android 6.0），反正无脑必调用就行。

Kotlin 复制代码

Activity {
    onCreate() {
        enableEdgeToEdge()
    }
}

2.2 处理系统重叠冲突

当内容绘制到系统栏区域时，就需要解决遮挡冲突了（可视问题、点击遮挡、手势冲突）。通过 Modifier 来设置（注意调用的先后问题，如背景色），表中左边包含了右边。

|---------------------------------|----------------------------------------------|---------------------------------|
| .safeContentPadding() 一个方法全部搞定。 | .safeDrawingPadding() 避免内容延伸至系统栏区域造成点击或可视问题。 | .statusBarsPadding() 状态栏边距。 |
| .safeContentPadding() 一个方法全部搞定。 | .safeDrawingPadding() 避免内容延伸至系统栏区域造成点击或可视问题。 | .navigationBarsPadding() 导航栏边距。 |
| .safeContentPadding() 一个方法全部搞定。 | .safeGesturesPadding() 避免系统全面屏手势与应用手势冲突。 ||

Kotlin 复制代码

@Composable
fun MainScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(AppColors.green)
            .safeContentPadding()
    ) {...}
}

三、一些技巧

3.1 状态栏半透明保护

谷歌官方提供的方式，解决可读性。

Kotlin 复制代码

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyTheme {
                MyContent()
                StatusBarProtection()
            }
        }
    }
}

@Composable
private fun StatusBarProtection(
    color: Color = MaterialTheme.colorScheme.surfaceContainer,
    heightProvider: () -> Float = calculateGradientHeight(),
) {

    Canvas(Modifier.fillMaxSize()) {
        val calculatedHeight = heightProvider()
        val gradient = Brush.verticalGradient(
            colors = listOf(
                color.copy(alpha = 1f),
                color.copy(alpha = .8f),
                Color.Transparent
            ),
            startY = 0f,
            endY = calculatedHeight
        )
        drawRect(
            brush = gradient,
            size = Size(size.width, calculatedHeight),
        )
    }
}

@Composable
fun calculateGradientHeight(): () -> Float {
    val statusBars = WindowInsets.statusBars
    val density = LocalDensity.current
    return { statusBars.getTop(density).times(1.2f) }
}