Блог

Это мой модальный ящик, когда он открыт

Код для его реализации

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

Что я на самом деле хочу, так это иметь прозрачный статус над ящиком, как на изображении ниже