Include HorizontalScrollAreaDemo

composablehorizons · Oct 17, 2024 · a836dfb · a836dfb
1 parent f05bb3a
commit a836dfb
Showing 1 changed file with 66 additions and 8 deletions.
diff --git a/demo-scrollarea/src/commonMain/kotlin/ScrollAreaDemo.kt b/demo-scrollarea/src/commonMain/kotlin/ScrollAreaDemo.kt
@@ -2,18 +2,15 @@ package com.composables.core.demo
 
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.OverscrollEffect
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.gestures.ScrollableDefaults
+import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicText
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
@@ -27,13 +24,19 @@ import kotlin.time.Duration.Companion.seconds
 
 @Composable
 fun ScrollAreaDemo() {
+    HorizontalScrollAreaDemo()
+}
+
+
+@Composable
+fun VerticalScrollAreaDemo() {
     Box(
         modifier = Modifier.fillMaxSize()
             .background(Brush.linearGradient(listOf(Color(0xFFFF5F6D), Color(0xFFFFC371))))
             .padding(vertical = 40.dp),
         contentAlignment = Alignment.TopCenter
     ) {
-        val items = listOf(
+        val desserts = listOf(
             "Cupcake",
             "Donut",
             "Eclair",
@@ -85,7 +88,7 @@ fun ScrollAreaDemo() {
                     modifier = Modifier.padding(4.dp)
                 )
                 Spacer(Modifier.height(12.dp))
-                items.forEach { i ->
+                desserts.forEach { i ->
                     BasicText(i, modifier = Modifier.padding(4.dp).fillMaxWidth())
                     Spacer(Modifier.height(12.dp))
                 }
@@ -111,3 +114,58 @@ fun ScrollAreaDemo() {
         }
     }
 }
+
+@Composable
+fun HorizontalScrollAreaDemo() {
+    Box(
+        modifier = Modifier.fillMaxSize()
+            .background(Brush.linearGradient(listOf(Color(0xFFFF5F6D), Color(0xFFFFC371))))
+            .padding(vertical = 40.dp),
+        contentAlignment = Alignment.TopCenter
+    ) {
+        val state = rememberScrollState()
+
+        ScrollArea(
+            state = rememberScrollAreaState(state),
+            modifier = Modifier
+                .widthIn(max = 400.dp)
+                .shadow(4.dp, RoundedCornerShape(8.dp))
+                .border(Dp.Hairline, Color.Black.copy(0.1f), RoundedCornerShape(8.dp))
+                .background(Color.White, RoundedCornerShape(8.dp))
+                .wrapContentHeight()
+        ) {
+            Row(
+                Modifier.horizontalScroll(state)
+                    .systemBarsPadding()
+                    .navigationBarsPadding()
+                    .padding(start = 4.dp, end = 16.dp)
+                    .fillMaxWidth()
+                    .padding(8.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                (1..100).forEach { i ->
+                    Box(Modifier.size(90.dp).clip(CircleShape).background(Color.Red))
+                }
+            }
+            HorizontalScrollbar(
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .height(12.dp)
+                    .fillMaxWidth(),
+            ) {
+                Thumb(
+                    modifier = Modifier
+                        .padding(2.dp)
+                        .width(12.dp)
+                        .background(Color.Black.copy(0.33f), RoundedCornerShape(100)),
+                    thumbVisibility = ThumbVisibility.HideWhileIdle(
+                        enter = fadeIn(),
+                        exit = fadeOut(),
+                        hideDelay = 1.seconds
+                    ),
+                )
+            }
+        }
+    }
+
+}