啊哈,這里實際上沒說沉浸式...奈何關(guān)鍵詞是這個
compose 版本使用最新的1.2版本
- 在setContent之前使用
WindowCompat.setDecorFitsSystemWindows(window,false)
讓內(nèi)容顯示在系統(tǒng)欄的后面,也就是顯示在狀態(tài)欄和導航欄的后面 - 設(shè)置為系統(tǒng)狀態(tài)欄為透明
我們導入
implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"
在需要的地方使用systemUiController,設(shè)置狀態(tài)欄為透明色,setStatusBarColor的參數(shù)2可以設(shè)置狀態(tài)欄上圖標的是否為暗色
val systemUiController = rememberSystemUiController()
LaunchedEffect(key1 = Unit) {
systemUiController.setStatusBarColor(Color.Transparent)
}
- 對底部內(nèi)容侵入系統(tǒng)欄后的重疊部分進行處理
對于底部導航欄 我們使用Modifier.navigationBarsPadding()
BottomNavigation(
backgroundColor = MaterialTheme.colors.surface,
modifier = Modifier.navigationBarsPadding()
)
對于頂部,我這里是單獨抽取的公共部分,所以就使用增加一個狀態(tài)欄高度的方式來適配
- 獲取狀態(tài)欄高度
val statusBarHeightDp = LocalDensity.current.run {
WindowInsets.statusBars.getTop(this).toDp()
}
- 獲取狀態(tài)欄的高度還可以使用
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
//狀態(tài)欄高度
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
