example: Widely use AnimatedVisibility

miuix-kotlin-multiplatform · Sep 4, 2024 · f8db27d · f8db27d
1 parent d014e03
commit f8db27d
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 72 deletions.
diff --git a/composeApp/src/commonMain/kotlin/UITest.kt b/composeApp/src/commonMain/kotlin/UITest.kt
@@ -1,3 +1,10 @@
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandHorizontally
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkHorizontally
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -90,7 +97,11 @@ fun UITest(
         enableTopBarBlur = enableTopBarBlur.value,
         enableBottomBarBlur = enableBottomBarBlur.value,
         topBar = {
-            if (showTopAppBar.value) {
+            AnimatedVisibility(
+                visible = showTopAppBar.value,
+                enter = fadeIn() + expandVertically(),
+                exit = fadeOut() + shrinkVertically()
+            ) {
                 MiuixTopAppBar(
                     color = if (enableTopBarBlur.value) Color.Transparent else MiuixTheme.colorScheme.background,
                     title = "Miuix",
@@ -99,7 +110,11 @@ fun UITest(
             }
         },
         bottomBar = {
-            if (showBottomBar.value) {
+            AnimatedVisibility(
+                visible = showBottomBar.value,
+                enter = fadeIn() + expandVertically(),
+                exit = fadeOut() + shrinkVertically()
+            ) {
                 MiuixNavigationBar(
                     color = if (enableBottomBarBlur.value) Color.Transparent else MiuixTheme.colorScheme.background,
                     items = items,
@@ -114,7 +129,11 @@ fun UITest(
             }
         },
         floatingActionButton = {
-            if (showFloatingActionButton.value) {
+            AnimatedVisibility(
+                visible = showFloatingActionButton.value,
+                enter = fadeIn() + expandHorizontally(),
+                exit = fadeOut() + shrinkHorizontally()
+            ) {
                 MiuixFloatingActionButton(
                     onClick = {
                         uriHandler.openUri("https://github.com/miuix-kotlin-multiplatform/miuix")
@@ -153,7 +172,11 @@ fun UITest(
         )
     }
 
-    if (showFPSMonitor.value) {
+    AnimatedVisibility(
+        visible = showFPSMonitor.value,
+        enter = fadeIn() + expandHorizontally(),
+        exit = fadeOut() + shrinkHorizontally()
+    ) {
         FPSMonitor(
             modifier = Modifier
                 .statusBarsPadding()

diff --git a/composeApp/src/commonMain/kotlin/component/TextComponent.kt b/composeApp/src/commonMain/kotlin/component/TextComponent.kt
@@ -1,5 +1,10 @@
 package component
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
@@ -55,6 +60,7 @@ fun TextComponent() {
     var miuixSuperRightCheckboxState by remember { mutableStateOf(false) }
     var miuixSuperSwitch by remember { mutableStateOf("State: false") }
     var miuixSuperSwitchState by remember { mutableStateOf(false) }
+    var miuixSuperSwitchAnimState by remember { mutableStateOf(false) }
 
     Row(
         modifier = Modifier
@@ -89,6 +95,39 @@ fun TextComponent() {
         )
     }
 
+    MiuixBasicComponent(
+        title = "Title",
+        summary = "Summary",
+        leftAction = {
+            MiuixText(text = "Left")
+        },
+        rightActions = {
+            MiuixText(text = "Right1")
+            Spacer(Modifier.width(8.dp))
+            MiuixText(text = "Right2")
+        },
+        onClick = {}
+    )
+
+    MiuixSuperArrow(
+        title = "Arrow",
+        summary = "With an arrow on right",
+        onClick = {}
+    )
+
+    MiuixSuperArrow(
+        leftAction = {
+            Image(
+                colorFilter = ColorFilter.tint(MiuixTheme.colorScheme.onBackground),
+                imageVector = Icons.Default.Person,
+                contentDescription = "Person",
+            )
+        },
+        title = "Person",
+        summary = "An introduction",
+        onClick = {}
+    )
+
     Row(
         modifier = Modifier
             .fillMaxWidth()
@@ -157,47 +196,66 @@ fun TextComponent() {
             .fillMaxWidth()
             .padding(horizontal = 16.dp)
     ) {
-
-        MiuixBasicComponent(
-            insideMargin = DpSize(16.dp, 16.dp),
-            title = "Title",
-            summary = "Summary",
-            leftAction = {
-                MiuixText(text = "Left")
-            },
-            rightActions = {
-                MiuixText(text = "Right1")
-                Spacer(Modifier.width(8.dp))
-                MiuixText(text = "Right2")
+        MiuixSuperCheckbox(
+            insideMargin = DpSize(18.dp, 18.dp),
+            title = "Checkbox",
+            summary = miuixSuperCheckbox,
+            checked = miuixSuperCheckboxState,
+            onCheckedChange = {
+                miuixSuperCheckboxState = it
+                miuixSuperCheckbox = "State: $it"
             },
-            onClick = {}
         )
 
-        MiuixSuperArrow(
+        MiuixSuperCheckbox(
             insideMargin = DpSize(18.dp, 18.dp),
-            title = "Arrow",
-            summary = "With an arrow on right",
-            onClick = {}
+            checkboxLocation = CheckboxLocation.Right,
+            title = "Checkbox",
+            checked = miuixSuperRightCheckboxState,
+            rightActions = {
+                MiuixText(
+                    modifier = Modifier.padding(end = 8.dp),
+                    text = miuixSuperRightCheckbox,
+                    color = MiuixTheme.colorScheme.subTextBase
+                )
+            },
+            onCheckedChange = {
+                miuixSuperRightCheckboxState = it
+                miuixSuperRightCheckbox = "$it"
+            },
         )
 
-        MiuixSuperArrow(
+        MiuixSuperSwitch(
             insideMargin = DpSize(18.dp, 18.dp),
-            leftAction = {
-                Image(
-                    colorFilter = ColorFilter.tint(MiuixTheme.colorScheme.onBackground),
-                    imageVector = Icons.Default.Person,
-                    contentDescription = "Person",
-                )
+            title = "Switch",
+            summary = "Click to expand a Switch",
+            checked = miuixSuperSwitchAnimState,
+            onCheckedChange = {
+                miuixSuperSwitchAnimState = it
             },
-            title = "Person",
-            summary = "An introduction",
-            onClick = {}
         )
 
+        AnimatedVisibility(
+            visible = miuixSuperSwitchAnimState,
+            enter = fadeIn() + expandVertically(),
+            exit = fadeOut() + shrinkVertically()
+        ) {
+            MiuixSuperSwitch(
+                insideMargin = DpSize(18.dp, 18.dp),
+                title = "Switch",
+                summary = miuixSuperSwitch,
+                checked = miuixSuperSwitchState,
+                onCheckedChange = {
+                    miuixSuperSwitchState = it
+                    miuixSuperSwitch = "State: $it"
+                },
+            )
+        }
+
         MiuixSuperArrow(
             insideMargin = DpSize(18.dp, 18.dp),
             title = "Dialog",
-            summary = "Click to show Dialog",
+            summary = "Click to show a Dialog",
             onClick = {
                 showDialog.value = true
             }
@@ -222,46 +280,6 @@ fun TextComponent() {
             onSelectedIndexChange = { newOption -> dropdownSelectedOptionRight.value = newOption },
         )
 
-        MiuixSuperCheckbox(
-            insideMargin = DpSize(18.dp, 18.dp),
-            title = "Checkbox",
-            summary = miuixSuperCheckbox,
-            checked = miuixSuperCheckboxState,
-            onCheckedChange = {
-                miuixSuperCheckboxState = it
-                miuixSuperCheckbox = "State: $it"
-            },
-        )
-
-        MiuixSuperCheckbox(
-            insideMargin = DpSize(18.dp, 18.dp),
-            checkboxLocation = CheckboxLocation.Right,
-            title = "Checkbox",
-            checked = miuixSuperRightCheckboxState,
-            rightActions = {
-                MiuixText(
-                    modifier = Modifier.padding(end = 8.dp),
-                    text = miuixSuperRightCheckbox,
-                    color = MiuixTheme.colorScheme.subTextBase
-                )
-            },
-            onCheckedChange = {
-                miuixSuperRightCheckboxState = it
-                miuixSuperRightCheckbox = "$it"
-            },
-        )
-
-        MiuixSuperSwitch(
-            insideMargin = DpSize(18.dp, 18.dp),
-            title = "Switch",
-            summary = miuixSuperSwitch,
-            checked = miuixSuperSwitchState,
-            onCheckedChange = {
-                miuixSuperSwitchState = it
-                miuixSuperSwitch = "State: $it"
-            },
-        )
-
     }
 
     dialog(showDialog)