官方页面
参考文章
一、概念
edge-to-edge 就是将APP的内容延伸到系统栏区域(状态栏、导航栏、刘海),提供更沉浸的体验。
二、实现
2.1 设置全屏显示
Android 15(API 35)开始会强制开启,更低版本需要在 Activity 的 onCreate() 中调用 enableEdgeToEdge() 方法(最低支持到 Android 6.0),反正无脑必调用就行。
Activity { onCreate() { enableEdgeToEdge() } }2.2 处理系统重叠冲突
当内容绘制到系统栏区域时,就需要解决遮挡冲突了(可视问题、点击遮挡、手势冲突)。通过 Modifier 来设置(注意调用的先后问题,如背景色),表中左边包含了右边。
.safeContentPadding() 一个方法全部搞定。 | .safeDrawingPadding() 避免内容延伸至系统栏区域造成点击或可视问题。 | .statusBarsPadding() 状态栏边距。 |
.navigationBarsPadding() 导航栏边距。 | ||
.safeGesturesPadding() 避免系统全面屏手势与应用手势冲突。 | ||
@Composable fun MainScreen() { Box( modifier = Modifier .fillMaxSize() .background(AppColors.green) .safeContentPadding() ) {...} }三、一些技巧
3.1 状态栏半透明保护
谷歌官方提供的方式,解决可读性。
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) } }