Scrollbare Karte, die sich über den Hintergrundverbesserungsabschnitt überschneidet ⇐ Android

[Anonymous]

Ich versuche, ein solches Design zu erreichen. Vorschau "komponierbar und auf reaktionsschnelle Weise. Beim Scrollen sollte sich die Karte nach oben nach oben bewegen und die Bildvorschau auf dem Hintergrund allmählich abdecken. darüber). < /p>
Hier ist der Code: < /p>

Code: Select all

@Composable
fun TripView() {
val configuration = LocalConfiguration.current

val screenHeight = configuration.screenHeightDp.dp
val screenWidth = configuration.screenWidthDp.dp

Box(
modifier = Modifier
.fillMaxSize()
) {

// Top-part of the view, where ImageCarousel, TripTopBar, TripTitle and MembersList are shown
Box(modifier = Modifier
.fillMaxHeight(0.48f)
) {
ImageCarousel()

Column(
modifier = Modifier
.safeContentPadding()
.fillMaxHeight(0.9f),
verticalArrangement = Arrangement.SpaceBetween
) {
TripTopBar()

Column(

) {
Text(
text = "Surf trip around France coast",
style = CustomTheme.typography.displayLargeWithShadow,
color = MaterialTheme.colorScheme.onPrimary,
)

MembersList()
}

}
}

// Bottom card
Column( // This fills all screen height
modifier = Modifier
.fillMaxHeight()
.verticalScroll(rememberScrollState())
.background(color = Color.Yellow.copy(alpha = 0.6f)),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer( // This makes the card itself position lower on the screen
modifier = Modifier.size(screenHeight/2 - 56.dp)
)

Column( // This is the card
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
.background(color = MaterialTheme.colorScheme.background)
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
repeat(50) {
Text( text = "Trip description")
}
}

}

}

}