企业官网建设流程全解析

官方页面
参考文章

一、概念

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

二、实现

2.1 设置全屏显示

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

Activity { onCreate() { enableEdgeToEdge() } }

2.2 处理系统重叠冲突

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

@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) } }