Add a scrollbar to the SquaresGalleryView on the desktop (#3520)

examples/imageviewer/shared/src/androidMain/kotlin/example/imageviewer/view/GalleryScreen.android.kt

@@ -0,0 +1,25 @@
+package example.imageviewer.view
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+actual fun GalleryLazyVerticalGrid(
+    columns: GridCells,
+    modifier: Modifier,
+    verticalArrangement: Arrangement.Vertical,
+    horizontalArrangement: Arrangement.Horizontal,
+    content: LazyGridScope.() -> Unit
+) {
+    LazyVerticalGrid(
+        columns = columns,
+        modifier = modifier,
+        verticalArrangement = verticalArrangement,
+        horizontalArrangement = horizontalArrangement,
+        content = content
+    )
+}

examples/imageviewer/shared/src/commonMain/kotlin/example/imageviewer/view/GalleryScreen.kt

@@ -12,7 +12,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.grid.GridCells
-import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.foundation.lazy.grid.itemsIndexed
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
@@ -32,10 +32,13 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
-import example.imageviewer.*
+import example.imageviewer.ExternalImageViewerEvent
+import example.imageviewer.LocalImageProvider
+import example.imageviewer.LocalInternalEvents
+import example.imageviewer.LocalNotification
 import example.imageviewer.icon.IconMenu
 import example.imageviewer.icon.IconVisibility
-import example.imageviewer.model.*
+import example.imageviewer.model.PictureData
 import example.imageviewer.style.ImageviewerColors
 import kotlinx.coroutines.launch
 import kotlin.math.absoluteValue
@@ -171,6 +174,15 @@ fun GalleryScreen(
     }
 }
 
+@Composable
+expect fun GalleryLazyVerticalGrid(
+    columns: GridCells,
+    modifier: Modifier,
+    verticalArrangement: Arrangement.Vertical,
+    horizontalArrangement: Arrangement.Horizontal,
+    content: LazyGridScope.() -> Unit
+)
+
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 private fun SquaresGalleryView(
@@ -178,9 +190,9 @@ private fun SquaresGalleryView(
     pagerState: PagerState,
     onSelect: (index: Int) -> Unit,
 ) {
-    LazyVerticalGrid(
+    GalleryLazyVerticalGrid(
-        modifier = Modifier.padding(top = 4.dp),
         columns = GridCells.Adaptive(minSize = 130.dp),
+        modifier = Modifier.padding(top = 4.dp),
         verticalArrangement = Arrangement.spacedBy(1.dp),
         horizontalArrangement = Arrangement.spacedBy(1.dp)
     ) {

examples/imageviewer/shared/src/desktopMain/kotlin/example/imageviewer/view/GalleryScreen.desktop.kt

@@ -0,0 +1,48 @@
+package example.imageviewer.view
+
+import androidx.compose.foundation.VerticalScrollbar
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+
+// On the desktop, include a scrollbar
+@Composable
+actual fun GalleryLazyVerticalGrid(
+    columns: GridCells,
+    modifier: Modifier,
+    verticalArrangement: Arrangement.Vertical,
+    horizontalArrangement: Arrangement.Horizontal,
+    content: LazyGridScope.() -> Unit
+) {
+    Box(
+        modifier = modifier
+    ) {
+        val scrollState = rememberLazyGridState()
+        val adapter = rememberScrollbarAdapter(scrollState)
+        LazyVerticalGrid(
+            columns = columns,
+            modifier = Modifier.fillMaxSize(),
+            state = scrollState,
+            verticalArrangement = verticalArrangement,
+            horizontalArrangement = horizontalArrangement,
+            content = content
+        )
+
+        Box(
+            modifier = Modifier.matchParentSize()
+        ){
+            VerticalScrollbar(
+                adapter = adapter,
+                modifier = Modifier.align(Alignment.CenterEnd),
+            )
+        }
+    }
+}

examples/imageviewer/shared/src/iosMain/kotlin/example/imageviewer/view/GalleryScreen.ios.kt

@@ -0,0 +1,25 @@
+package example.imageviewer.view
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+actual fun GalleryLazyVerticalGrid(
+    columns: GridCells,
+    modifier: Modifier,
+    verticalArrangement: Arrangement.Vertical,
+    horizontalArrangement: Arrangement.Horizontal,
+    content: LazyGridScope.() -> Unit
+) {
+    LazyVerticalGrid(
+        columns = columns,
+        modifier = modifier,
+        verticalArrangement = verticalArrangement,
+        horizontalArrangement = horizontalArrangement,
+        content = content
+    )
+}