Use LazyVerticalStaggeredGrid to highlight the rearranging issue

Also increase the number of items to a very large number
rdsarna · Jun 26, 2024 · ba65956 · ba65956
1 parent fd8f806
commit ba65956
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt
@@ -3,6 +3,7 @@ package com.jetbrains.kmpapp.screens.list
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
@@ -15,6 +16,9 @@ import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -65,15 +69,28 @@ private fun ObjectGrid(
     modifier: Modifier = Modifier,
 ) {
     LazyRow() {  }
-    LazyVerticalGrid(
-        columns = GridCells.Adaptive(180.dp),
-        modifier = modifier.fillMaxSize(),
-        contentPadding = PaddingValues(8.dp)
+    LazyVerticalStaggeredGrid(
+        columns = StaggeredGridCells.Fixed(count = 2),
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        verticalItemSpacing = 16.dp,
     ) {
-        items(objects, key = { it.objectID }) { obj ->
+        // make sure all objects have a unique key
+        require(objects.size == objects.map { it.objectID }.toSet().size)
+
+        items(
+            count = objects.size,
+            key = { index -> objects[index].objectID },
+            contentType = { index -> objects[index] },
+            span = { StaggeredGridItemSpan.SingleLane },
+        ) { index ->
+            val obj = objects[index]
             ObjectFrame(
                 obj = obj,
                 onClick = { onObjectClick(obj.objectID) },
+                modifier = Modifier
+                    .height(if (obj.objectID % 2 == 0) 350.dp else 250.dp)
+                    .background(Color.LightGray)
             )
         }
     }

diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreenModel.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreenModel.kt
@@ -6,10 +6,23 @@ import com.jetbrains.kmpapp.data.MuseumObject
 import com.jetbrains.kmpapp.data.MuseumRepository
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
 
 class ListScreenModel(museumRepository: MuseumRepository) : ScreenModel {
     val objects: StateFlow<List<MuseumObject>> =
         museumRepository.getObjects()
+            .map { objects ->
+                // make the number of objects 50 times larger
+                val newObjects = objects.toMutableList()
+                repeat(50) { newObjects.addAll(objects) }
+                newObjects.mapIndexed { index, obj ->
+                    obj.copy(
+                        objectID = obj.objectID + index,
+                    )
+                }
+                    // require all objects to have unique IDs
+                    .distinctBy { it.objectID }
+            }
             .stateIn(screenModelScope, SharingStarted.WhileSubscribed(5000), emptyList())
 }