Das gemeinsam genutzte Element kehrt immer wieder zum oberen linken Rasterquadrat zurück, wenn eine Containertransformat ⇐ Android

[Anonymous]

Ich arbeite an einem Quizspiel und möchte, dass die Rasterquadrate größer werden, um die vollständigen Quizfragen und Schaltflächen anzuzeigen. Ich verwende eine Containertransformation und das funktioniert bis auf eine Sache einwandfrei. Alle meine Quadrate werden in das obere linke Quadrat meines Gitters verschoben, unabhängig davon, welches Quadrat ich auswähle.


Ich habe versucht, meine Quadrate in einem LazyVerticalGrid und einer FlowRow zu organisieren (was am besten aussieht). ohne Erfolg. Wie kann ich mein Quadrat dazu bringen, sich zu merken, wo es im Raster war?
Erstellen der Hauptansicht in Kotlin

Code: Select all

    fun BuildTicTacView(
modifier : Modifier = Modifier
){
var showDetails by remember { mutableStateOf(false) }

SharedTransitionLayout {
AnimatedContent(
showDetails,
transitionSpec = {
fadeIn(tween(1200)) togetherWith
fadeOut(tween(1200)) using
SizeTransform { _, _ -> spring() }
},
label = "basic_transition"
) { targetState ->
if (!targetState) { //we're showing the grid
FlowRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(4.dp),
maxItemsInEachRow = 3
) {
for (i in 0 .. 9)
{
BoxItem(
{
squareModel.selected = i
showDetails = true
},
this@SharedTransitionLayout,
this@AnimatedContent,
i
)
}

}
} else { //time to select the details
SquareDetails(
{
squareModel.selected = 0
showDetails = false
},
this@SharedTransitionLayout,
this@AnimatedContent
)
}
}
}
}

Das kleine Kästchen in der Rasteransicht

Code: Select all

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun BoxItem(
showDetails: () -> Unit,
sharedTransitionScope: SharedTransitionScope,
animatedVisibilityScope : AnimatedVisibilityScope,
box : Int
)
{
//shared transition to make the transition from large to small smooth
with(sharedTransitionScope) {
Box(
modifier = Modifier
.sharedBounds(
rememberSharedContentState(key = "bounds$box"),
animatedVisibilityScope = animatedVisibilityScope,
enter = fadeIn(),
exit = fadeOut(),
resizeMode = ScaleToBounds()
)
.padding(FlipBoxSize.BoxPadding.size)
.clickable { showDetails() }
) {

Column(
modifier = Modifier
.padding(FlipBoxSize.BoxPadding.size)
.clickable { showDetails() },
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
//Flip box.  This is my custom flippable Box
FlippableSquare(
Modifier
.sharedBounds(
rememberSharedContentState(key = "flipBox$box"),
animatedVisibilityScope = animatedVisibilityScope
),
box,
SquareFontSizes.FlipBoxTextSize.fontSize,
FlipBoxFace.BackFace.face,
FlipBoxSize.BoxGridWidth.size,
FlipBoxSize.BoxGridHeight.size

)
}
}
}
}

Detailansicht

Code: Select all

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun SquareDetails(
showDetails: () -> Unit,
sharedTransitionScope: SharedTransitionScope,
animatedVisibilityScope : AnimatedVisibilityScope

)
{
val box = squareModel.selected
//shared transition to make the transition from large to small smooth
with(sharedTransitionScope) {
Box (
modifier = Modifier
.fillMaxHeight(.75f)
.fillMaxWidth(.5f)
.sharedBounds(
rememberSharedContentState(key = "bounds$box"),
animatedVisibilityScope = animatedVisibilityScope,
enter = fadeIn(),
exit = fadeOut(),
resizeMode = ScaleToBounds()
)
.padding(FlipBoxSize.BoxPadding.size)
.clickable {
showDetails()
},
contentAlignment = Center
) {
Column(
modifier = Modifier,
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
//Flip box
FlippableSquare(
Modifier
.sharedBounds(
rememberSharedContentState(key = "flipBox$box"),
animatedVisibilityScope = animatedVisibilityScope
),
box?: 1,
SquareFontSizes.FlipBoxTextSize.fontSize,
FlipBoxFace.FrontFace.face,
FlipBoxSize.BoxLargeWidth.size,
FlipBoxSize.BoxLargeHeight.size
)
}
}
}
}