example: Re-add haze

* Use snapshot version with macos native support

Author: YuKongA

composeApp/build.gradle.kts

@@ -90,6 +90,8 @@ kotlin {
             implementation(compose.ui)
             implementation(compose.components.resources)
 
+            implementation(libs.haze)
+
             implementation(project(":miuix"))
         }
         desktopMain.dependencies {

composeApp/src/commonMain/kotlin/UITest.kt

@@ -30,6 +30,12 @@ import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.util.lerp
+import dev.chrisbanes.haze.HazeState
+import dev.chrisbanes.haze.HazeStyle
+import dev.chrisbanes.haze.HazeTint
+import dev.chrisbanes.haze.hazeEffect
+import dev.chrisbanes.haze.hazeSource
 import kotlinx.coroutines.FlowPreview
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.debounce
@@ -58,6 +64,7 @@ import top.yukonga.miuix.kmp.icon.icons.useful.More
 import top.yukonga.miuix.kmp.icon.icons.useful.NavigatorSwitch
 import top.yukonga.miuix.kmp.icon.icons.useful.Order
 import top.yukonga.miuix.kmp.icon.icons.useful.Settings
+import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtils.Companion.dismissPopup
 import utils.FPSMonitor
 
@@ -97,6 +104,23 @@ fun UITest(
         }
     }
 
+    val hazeState = remember { HazeState() }
+
+    val hazeStyleTopBar = HazeStyle(
+        backgroundColor = if (currentScrollBehavior.state.heightOffset > -1) Color.Transparent else MiuixTheme.colorScheme.background,
+        tint = HazeTint(
+            MiuixTheme.colorScheme.background.copy(
+                if (currentScrollBehavior.state.heightOffset > -1) 1f
+                else lerp(1f, 0.67f, (currentScrollBehavior.state.heightOffset + 1) / -143f)
+            )
+        )
+    )
+
+    val hazeStyleBottomBar = HazeStyle(
+        backgroundColor = MiuixTheme.colorScheme.background,
+        tint = HazeTint(MiuixTheme.colorScheme.background.copy(0.67f))
+    )
+
     val showFPSMonitor = remember { mutableStateOf(false) }
     val showTopAppBar = remember { mutableStateOf(true) }
     val showBottomBar = remember { mutableStateOf(true) }
@@ -119,11 +143,19 @@ fun UITest(
                 enter = fadeIn() + expandVertically(),
                 exit = fadeOut() + shrinkVertically()
             ) {
-                BoxWithConstraints {
+                BoxWithConstraints(
+                    modifier = Modifier
+                        .hazeEffect(hazeState) {
+                            style = hazeStyleTopBar
+                            blurRadius = 25.dp
+                            noiseFactor = 0f
+                        }
+                ) {
                     if (maxWidth > 840.dp) {
                         SmallTopAppBar(
                             title = "Miuix",
                             scrollBehavior = currentScrollBehavior,
+                            color = Color.Transparent,
                             actions = {
                                 if (isTopPopupExpanded.value) {
                                     ListPopup(
@@ -174,6 +206,7 @@ fun UITest(
                         TopAppBar(
                             title = "Miuix",
                             scrollBehavior = currentScrollBehavior,
+                            color = Color.Transparent,
                             actions = {
                                 if (isTopPopupExpanded.value) {
                                     ListPopup(
@@ -262,6 +295,12 @@ fun UITest(
                     showBottomPopup.value = true
                 }
                 NavigationBar(
+                    modifier = Modifier
+                        .hazeEffect(hazeState) {
+                            style = hazeStyleBottomBar
+                            blurRadius = 25.dp
+                            noiseFactor = 0f
+                        },
                     items = items,
                     selected = targetPage,
                     onClick = { index ->
@@ -294,7 +333,7 @@ fun UITest(
         }
     ) { padding ->
         AppHorizontalPager(
-            modifier = Modifier.imePadding(),
+            modifier = Modifier.imePadding().hazeSource(state = hazeState),
             pagerState = pagerState,
             topAppBarScrollBehaviorList = topAppBarScrollBehaviorList,
             padding = padding,

gradle/libs.versions.toml

@@ -9,13 +9,15 @@ androidx-window = "1.3.0"
 androidx-graphics-shapes = "1.0.0-alpha04"
 compose-plugin = "1.8.0-alpha04"
 dokka = "2.0.0"
+haze = "1.6.0-SNAPSHOT"
 kotlin = "2.1.10"
 
 [libraries]
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity-compose" }
 androidx-graphics-shapes = { module = "org.jetbrains.androidx.graphics:graphics-shapes", version.ref = "androidx-graphics-shapes" }
 androidx-window = { group = "androidx.window", name = "window", version.ref = "androidx-window" }
 compose-window-size = { module = "org.jetbrains.compose.material3:material3-window-size-class", version.ref = "compose-plugin" }
+haze = { module = "dev.chrisbanes.haze:haze", version.ref = "haze" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }

settings.gradle.kts

@@ -25,6 +25,7 @@ dependencyResolutionManagement {
             }
         }
         mavenCentral()
+        maven("https://raw.githubusercontent.com/miuix-kotlin-multiplatform/maven-repository/main/repository/snapshots")
     }
 }