调整SearchBar动画

Author: YunZiA

example/src/commonMain/kotlin/MainPage.kt

@@ -91,9 +91,11 @@ fun MainPage(
                     SmallTitle(text = "SearchBar")
                     SearchBar(
                         modifier = Modifier
-                            .padding(start = 12.dp, end = 12.dp, bottom = 6.dp),
+                            .padding(start = 12.dp, bottom = 6.dp),
                         inputField = {
                             InputField(
+                                modifier = Modifier
+                                    .padding(end = 12.dp),
                                 query = miuixSearchValue,
                                 onQueryChange = { miuixSearchValue = it },
                                 onSearch = { expanded = false },
@@ -105,7 +107,7 @@ fun MainPage(
                         outsideRightAction = {
                             Text(
                                 modifier = Modifier
-                                    .padding(start = 12.dp)
+                                    .padding(end = 12.dp)
                                     .clickable(
                                         interactionSource = null,
                                         indication = null
@@ -169,9 +171,11 @@ fun MainPage(
                         SmallTitle(text = "SearchBar")
                         SearchBar(
                             modifier = Modifier
-                                .padding(start = 12.dp, end = 12.dp, bottom = 6.dp),
+                                .padding(start = 12.dp, bottom = 6.dp),
                             inputField = {
                                 InputField(
+                                    modifier = Modifier
+                                        .padding(end = 12.dp),
                                     query = miuixSearchValue,
                                     onQueryChange = { miuixSearchValue = it },
                                     onSearch = { expanded = false },
@@ -183,7 +187,7 @@ fun MainPage(
                             outsideRightAction = {
                                 Text(
                                     modifier = Modifier
-                                        .padding(start = 12.dp)
+                                        .padding(end = 12.dp)
                                         .clickable(
                                             interactionSource = null,
                                             indication = null

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt

@@ -1,8 +1,12 @@
 package top.yukonga.miuix.kmp.basic
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandHorizontally
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkHorizontally
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.Interaction
@@ -80,7 +84,9 @@ fun SearchBar(
                     inputField()
                 }
                 AnimatedVisibility(
-                    visible = expanded
+                    visible = expanded,
+                    enter = expandHorizontally() + slideInHorizontally(initialOffsetX = { it }),
+                    exit = shrinkHorizontally() + slideOutHorizontally(targetOffsetX = { it })
                 ) {
                     outsideRightAction?.invoke()
                 }