Общий элемент продолжает возвращаться к верхнему левому квадрату сетки при использовании преобразования контейнера с пер ⇐ Android

[Anonymous]

Я работаю над викториной игрой и хочу, чтобы квадраты сетки стали крупнее, чтобы отображались все вопросы и кнопки викторины. Я использую преобразование контейнера, и оно работает нормально, за исключением одного. Все мои квадраты переходят в верхний левый квадрат моей сетки независимо от того, какой квадрат я выбираю.


Я пробовал организовать свои квадраты в LazyVerticalGrid и FlowRow (который выглядит лучше всего), чтобы нет воспользоваться. Как мне заставить квадрат запомнить, где он находился в сетке?
Создание основного представления в Kotlin
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
)
}
}
}
}

Маленькая рамка в виде сетки
@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

)
}
}
}
}

Просмотр подробностей
@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
)
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... -a-contain