android - Jetpack Compose 在打开时将 ModalDrawer 上的状态栏颜色设置为透明
问题描述
这是我打开时的模态抽屉
实现它的代码
@ExperimentalMaterialApi
@Composable
private fun TutorialContent() {
ModalDrawerComponent()
}
@ExperimentalMaterialApi
@Composable
private fun ModalDrawerComponent() {
val drawerState = rememberDrawerState(DrawerValue.Closed)
val coroutineScope = rememberCoroutineScope()
val openDrawer: () -> Unit = { coroutineScope.launch { drawerState.open() } }
val closeDrawer: () -> Unit = { coroutineScope.launch { drawerState.close() } }
var selectedIndex by remember { mutableStateOf(0) }
ModalDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerContentHeader()
Divider()
ModelDrawerContentBody(
selectedIndex,
onSelected = {
selectedIndex = it
},
closeDrawer = closeDrawer
)
},
content = {
Column(modifier = Modifier.fillMaxSize()) {
ModalDrawerTopAppBar(openDrawer)
ModalContent(openDrawer)
}
}
)
}
@Composable
fun ModalDrawerTopAppBar(openDrawer: () -> Unit) {
TopAppBar(
title = {
Text("ModalDrawer")
},
navigationIcon = {
IconButton(onClick = openDrawer) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = null
)
}
},
actions = {}
)
}
@Composable
fun ModalDrawerContentHeader() {
Column(
modifier = Modifier
.fillMaxWidth()
.height(180.dp)
.padding(20.dp)
) {
Image(
modifier = Modifier
.size(60.dp)
.clip(CircleShape),
painter = painterResource(id = R.drawable.avatar_1_raster),
contentDescription = null
)
Spacer(modifier = Modifier.weight(1f))
Text(text = "Android", fontWeight = FontWeight.Bold, fontSize = 22.sp)
Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(text = "android@android.com")
Spacer(modifier = Modifier.weight(1f))
Icon(imageVector = Icons.Filled.ArrowDropDown, contentDescription = null)
}
}
}
}
@Composable
fun ModelDrawerContentBody(
selectedIndex: Int,
onSelected: (Int) -> Unit,
closeDrawer: () -> Unit
) {
Column(modifier = Modifier.fillMaxWidth()) {
modalDrawerList.forEachIndexed { index, pair ->
val label = pair.first
val imageVector = pair.second
DrawerButton(
icon = imageVector,
label = label,
isSelected = selectedIndex == index,
action = {
onSelected(index)
}
)
}
}
}
@ExperimentalMaterialApi
@Composable
fun ModalContent(openDrawer: () -> Unit) {
LazyColumn {
items(userList) { item: String ->
ListItem(
modifier = Modifier.clickable {
openDrawer()
},
icon = {
Image(
modifier = Modifier
.size(40.dp)
.clip(CircleShape),
painter = painterResource(id = R.drawable.avatar_1_raster),
contentDescription = null
)
},
secondaryText = {
Text(text = "Secondary text")
}
) {
Text(text = item, fontSize = 18.sp)
}
}
}
}
val modalDrawerList = listOf(
Pair("My Files", Icons.Filled.Folder),
Pair("Shared with Me", Icons.Filled.People),
Pair("Starred", Icons.Filled.Star),
Pair("Recent", Icons.Filled.AccessTime),
Pair("Offline", Icons.Filled.OfflineShare),
Pair("Uploads", Icons.Filled.Upload),
Pair("Backups", Icons.Filled.CloudUpload),
)
解决方案
推荐阅读
- java - 我正在尝试创建一个将 opps_score 或 bets_score 加 1 的函数,但是当我打印结果时会打印默认值
- python - 将openpyxl格式从文本设置为数字
- netcat - 将 TCP 连接桥接到 UDP(双向)
- javascript - 找出 .map() 方法
- python - pyttsx3 口语之间的不同时间
- wherescape-red - 在 Wherescape RED 中查看元数据
- microsoft-graph-api - Microsoft Graph API 通过 joinUrl 获取在线会议
- python - 带有 If 条件 Python 的嵌套 Lambda
- reactjs - CORS 标头“Access-Control-Allow-Origin”缺少 REACT
- python - 透明地通过带有可变参数列表的函数