Складная панель инструментов для создания реактивного ранца ⇐ Android

[Anonymous]

Я пытался реализовать складную панель инструментов в своем приложении. У меня есть следующие составные элементы

Код: Выделить всё

 ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet(drawerContainerColor = Color.White) {
// my menu items
}

}, drawerState = drawerState, content = {  }, modifier = Modifier
.background(
colorResource(id = R.color.white)
)
){
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.background(colorResource(id = R.color.white))
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
HeaderTile("Good Morning", coroutineScope, drawerState);
OptionsTile(
modifier = Modifier.fillMaxWidth(),
)
}
}

@Composable
fun HeaderTile(
greetMessage: String,
coroutineScope: CoroutineScope,
drawerState: DrawerState
) {
val transparentRed = Color.Red.copy(alpha = 0.8f) // 50% transparent red
val transparentBlue = Color.Black.copy(alpha = 0.8f)
val brush = Brush.verticalGradient(listOf(transparentRed, transparentBlue))
Box(
modifier = Modifier
.height(240.dp)
.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
Image(
painter = painterResource(id = R.drawable.header_image),
contentDescription = null,
contentScale = ContentScale.Crop, // Adjust as needed
modifier = Modifier.fillMaxSize()
)
Box(
modifier = Modifier
.fillMaxSize()
.background(
brush = brush
) // Bottom-right corner
)
Box(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.TopStart)
.padding(top = 5.dp)
.wrapContentHeight(),
contentAlignment = Alignment.TopStart
) {
androidx.compose.material3.IconButton(onClick = { coroutineScope.launch { drawerState.open() } },
content = {
androidx.compose.material3.Icon(
imageVector = Icons.Default.Menu, contentDescription = null,
Modifier.size(30.dp),
tint = colorResource(id = R.color.white)
)
})
Column(
modifier = Modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
androidx.compose.material3.Text(
text = "#Hello Everyone",
color = White,
style = androidx.compose.material3.MaterialTheme.typography.headlineSmall,
fontStyle = FontStyle.Italic,
)
}
}
}
}

@Composable
fun OptionsTile(
modifier: Modifier = Modifier
) {
Row(
modifier = modifier
.offset(y = -(50).dp)
.padding(start = 15.dp, end = 15.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
for (i in 1..3) {
Card(
colors = CardDefaults.cardColors(
containerColor = White
),
modifier = Modifier
.height(height = 100.dp)
.weight(1f),
elevation = CardDefaults.cardElevation(defaultElevation = 5.dp),
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {

}
}
}
}

Это даст мне такой макет


Я хочу, чтобы при прокрутке вверх красный заголовок изображения сворачивался до трех таких пунктов меню, как этот< /p>


Есть предложения!

Подробнее здесь: https://stackoverflow.com/questions/792 ... ck-compose