啊哈,这里实际上没说沉浸式...奈何关键词是这个
compose 版本使用最新的1.2版本
- 在setContent之前使用
WindowCompat.setDecorFitsSystemWindows(window,false)
让内容显示在系统栏的后面,也就是显示在状态栏和导航栏的后面 - 设置为系统状态栏为透明
我们导入
implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"
在需要的地方使用systemUiController,设置状态栏为透明色,setStatusBarColor的参数2可以设置状态栏上图标的是否为暗色
val systemUiController = rememberSystemUiController()
LaunchedEffect(key1 = Unit) {
systemUiController.setStatusBarColor(Color.Transparent)
}
- 对底部内容侵入系统栏后的重叠部分进行处理
对于底部导航栏 我们使用Modifier.navigationBarsPadding()
BottomNavigation(
backgroundColor = MaterialTheme.colors.surface,
modifier = Modifier.navigationBarsPadding()
)
对于顶部,我这里是单独抽取的公共部分,所以就使用增加一个状态栏高度的方式来适配
- 获取状态栏高度
val statusBarHeightDp = LocalDensity.current.run {
WindowInsets.statusBars.getTop(this).toDp()
}
- 获取状态栏的高度还可以使用
val statusBarHeightDp = with(LocalContext.current){
var height = 0
val resourcesId = resources.getIdentifier("status_bar_height", "dimen", "android")
if(resourcesId>0) {
height = resources.getDimensionPixelSize(resourcesId)
}
with(LocalDensity.current) {
height.toDp()
}
}
- 抽取的topAppBar代码为
@Composable
fun TopAppBar(content: @Composable () -> Unit) {
val systemUiController = rememberSystemUiController()
LaunchedEffect(key1 = Unit) {
systemUiController.setStatusBarColor(Color.Transparent)
}
//标题栏高度
val appBarHeight = 56.dp
//状态栏高度
val statusBarHeightDp = LocalDensity.current.run {
WindowInsets.statusBars.getTop(this).toDp()
}
Row(
modifier = Modifier.background(
brush = Brush.linearGradient(
listOf(
Blue700,
Blue200
)
)
)
.fillMaxWidth()
.height(appBarHeight + statusBarHeightDp)
.padding(top = statusBarHeightDp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
content()
}
}
@Preview
@Composable
fun TopAppBarPreview() {
TopAppBar {
Text(text = "标题")
}
}
topAppBar效果为
WX20220925-185903@2x.png
整体效果为:
WX20220925-192621@2x.png
