Merge pull request #26 from walt-zhong/zxj_lazy_grid_scrollbar

add scrollbar for LazyVerticalGrid
nanihadesuka · Nov 8, 2023 · cf12df2 · cf12df2
2 parents 48a5e03 + edd46ae
commit cf12df2
Show file tree

Hide file tree

Showing 3 changed files with 934 additions and 1 deletion.
diff --git a/app/src/main/java/my/nanihadesuka/lazycolumnscrollbar/MainActivity.kt b/app/src/main/java/my/nanihadesuka/lazycolumnscrollbar/MainActivity.kt
@@ -6,11 +6,16 @@ import androidx.activity.compose.setContent
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
@@ -21,14 +26,19 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import my.nanihadesuka.compose.ColumnScrollbar
 import my.nanihadesuka.compose.LazyColumnScrollbar
+import my.nanihadesuka.compose.LazyGridVerticalScrollbar
 import my.nanihadesuka.compose.ScrollbarSelectionMode
 import my.nanihadesuka.lazycolumnscrollbar.ui.theme.LazyColumnScrollbarTheme
 
@@ -44,8 +54,9 @@ class MainActivity : ComponentActivity() {
 fun MainView() {
     LazyColumnScrollbarTheme {
         Surface(color = MaterialTheme.colors.background) {
-            LazyColumnView()
+          //  LazyColumnView()
 //            ColumnView()
+            lazyGridView()
         }
     }
 }
@@ -118,6 +129,72 @@ fun LazyColumnView() {
     }
 }
 
+@Composable
+fun lazyGridView(){
+    val photos by rememberSaveable {
+        mutableStateOf(List(100) { it })
+    }
+
+    val lazyGridState = rememberLazyGridState()
+    Box(
+        modifier = Modifier
+            .padding(16.dp)
+            .border(width = 1.dp, MaterialTheme.colors.primary)
+            .padding(1.dp)
+    ){
+        LazyGridVerticalScrollbar(
+            state = lazyGridState,
+            selectionMode = ScrollbarSelectionMode.Thumb,
+            alwaysShowScrollBar = true,
+            indicatorContent = { index, isThumbSelected ->
+                Surface {
+                    Text(
+                        text = "i: $index",
+                        modifier = Modifier
+                            .clip(
+                                RoundedCornerShape(
+                                    topStart = 20.dp,
+                                    bottomStart = 20.dp,
+                                    bottomEnd = 16.dp
+                                )
+                            )
+                            .background(Color.Green)
+                            .padding(8.dp)
+                            .clip(CircleShape)
+                            .background(if (isThumbSelected) Color.Blue else Color.Yellow)
+                            .padding(12.dp),
+                        color = Color.Red
+                    )
+                }
+            }
+        ){
+            LazyVerticalGrid(
+                state = lazyGridState,
+                columns = GridCells.Adaptive(minSize = 128.dp),
+                verticalArrangement = Arrangement.spacedBy(3.dp),
+                horizontalArrangement = Arrangement.spacedBy(3.dp),
+                ) {
+                items(photos.size, key = { it }) {
+                    Surface(
+                        elevation = 3.dp,
+                        modifier = Modifier.aspectRatio(1f),
+                        color = Color.Yellow
+                    ) {
+                        Text(
+                            text = "Item $it",
+                            modifier = Modifier
+                                .padding(24.dp),
+                            color = Color.Black
+                        )
+
+                    }
+                }
+            }
+        }
+
+    }
+}
+
 @Composable
 fun ColumnView() {
     val listData = (0..100).toList()