我正在使用 Jetpack Composable 进行开发,以将 Icon Composable 放置在 Navigation Drawer 中。
实现代码时,在Navigation Drawer中点击TopAppBar中的Menu图标,可以看到Navigation Drawer,
我在Drawer中的Row Composable中使用了IconButton Composable将Icon放入其中来显示图片。
但是,当你运行应用程序并检查 Drawer 时,你看不到 Icon,当你点击你放置在所需位置的地方时,会出现 riple 动画和事件。
我想知道为什么我在抽屉里看不到图标
抽屉密码
@Composable
fun ProfileModalDrawer(
scope: CoroutineScope,
bottomScaffoldState: BottomSheetScaffoldState,
routeAction: RouteAction
) {
val nickname: String = MyApplication.prefs.getData("nickname", "")
val email: String = MyApplication.prefs.getData("email", "")
Column(
modifier = Modifier
.fillMaxSize()
.padding(start = 17.dp, end = 17.dp, top = 73.dp),
) {
Row(modifier = Modifier
.fillMaxWidth()
.padding(bottom = 21.dp),
verticalAlignment = Alignment.CenterVertically) {
Image(modifier = Modifier.size(41.dp),
painter = painterResource(id = R.drawable.defaultprofile),
contentDescription = "profile",
contentScale = ContentScale.Crop)
Column(modifier = Modifier
.fillMaxWidth()
.padding(start = 8.dp),
verticalArrangement = Arrangement.SpaceBetween,
horizontalAlignment = Alignment.Start) {
Text(text = nickname,
fontSize = 14.sp,
fontWeight = FontWeight.Bold,
lineHeight = 21.sp)
Text(text = email,
color = Color(0xff9E9E9E),
fontSize = 11.sp,
fontWeight = FontWeight.Medium,
lineHeight = 16.sp)
}
IconButton(onClick = {
scope.launch {
bottomScaffoldState.drawerState.close()
}
goDetailProfile(NAV_ROUTE.PROFILE, routeAction)
}) {
Icon(modifier = Modifier
.size(24.dp)
.padding(start = 5.dp),
painter = painterResource(id = R.drawable.edit),
contentDescription = null)
}
}
Divider(modifier = Modifier
.fillMaxWidth()
.padding(bottom = 21.dp),
color = Color(0xffe9e9e9),
thickness = 1.dp)
Text(modifier = Modifier
.fillMaxWidth()
.padding(start = 2.dp, bottom = 20.dp),
text = "환경 설정",
fontWeight = FontWeight.Bold,
fontSize = 13.sp,
lineHeight = 17.sp)
Row(modifier = Modifier
.fillMaxWidth()
.padding(start = 2.dp, bottom = 22.dp),
verticalAlignment = Alignment.CenterVertically) {
Image(modifier = Modifier
.size(22.dp)
.padding(start = 2.dp, end = 6.dp),
painter = painterResource(id = R.drawable.setting),
contentDescription = null)
Text(modifier = Modifier.wrapContentWidth(),
text = "비밀번호 변경",
fontWeight = FontWeight.Medium,
fontSize = 13.sp,
lineHeight = 17.sp)
}
Row(modifier = Modifier
.fillMaxWidth()
.padding(start = 2.dp, bottom = 22.dp),
verticalAlignment = Alignment.CenterVertically) {
Image(modifier = Modifier
.size(22.dp)
.padding(start = 2.dp, end = 6.dp),
painter = painterResource(id = R.drawable.setting),
contentDescription = null)
Text(modifier = Modifier.wrapContentWidth(),
text = "알림 설정",
fontWeight = FontWeight.Medium,
fontSize = 13.sp,
lineHeight = 17.sp)
}
Row(modifier = Modifier
.fillMaxWidth()
.padding(start = 2.dp, bottom = 28.dp),
verticalAlignment = Alignment.CenterVertically) {
Image(modifier = Modifier
.size(22.dp)
.padding(start = 2.dp, end = 6.dp),
painter = painterResource(id = R.drawable.setting),
contentDescription = null)
Text(modifier = Modifier.wrapContentWidth(),
text = "테마 변경",
fontWeight = FontWeight.Medium,
fontSize = 13.sp,
lineHeight = 17.sp)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(modifier = Modifier.size(14.dp),
painter = painterResource(id = R.drawable.arrow),
contentDescription = null)
}
}
}
TopApp条码
BottomSheetScaffold(scaffoldState = bottomScaffoldState, drawerContent = {
ProfileModalDrawer(scope = scope,
bottomScaffoldState = bottomScaffoldState,
routeAction = routeAction)
}, navigationIcon = {
IconButton(onClick = {
scope.launch {
bottomScaffoldState.drawerState.open()
}
}) {
Icon(imageVector = Icons.Filled.Menu, contentDescription = null)
}
},
colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Color.White,
titleContentColor = Color.Black))
}) {
}