Skip to content

调整SearchBar动画 #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 20, 2025
Merged

调整SearchBar动画 #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef1b20e
调整SearchBar动画
YunZiA Apr 20, 2025
8002e16
Update PullToRefresh.kt
YuKongA Apr 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions docs/components/searchbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,29 +39,30 @@ SearchBar(

### SearchBar Properties

| Property Name | Type | Description | Default Value | Required |
| ------------------ | ---------------------------------- | ------------------------------------------------- | ------------- | -------- |
| inputField | @Composable () -> Unit | Search input field component | - | Yes |
| expanded | Boolean | Whether to show search results | false | Yes |
| onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes |
| modifier | Modifier | Modifier applied to the search bar | Modifier | No |
| outsideRightAction | @Composable (() -> Unit)? | Action component shown on the right when expanded | null | No |
| content | @Composable ColumnScope.() -> Unit | Content shown when expanded | - | Yes |
| Property Name | Type | Description | Default Value | Required |
| ------------------ | ---------------------------------- | ------------------------------------------------- | ------------------- | -------- |
| inputField | @Composable () -> Unit | Search input field component | - | Yes |
| onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes |
| insideMargin | DpSize | Internal padding | DpSize(12.dp, 0.dp) | No |
| modifier | Modifier | Modifier applied to the search bar | Modifier | No |
| expanded | Boolean | Whether to show search results | false | No |
| outsideRightAction | @Composable (() -> Unit)? | Action component shown on the right when expanded | null | No |
| content | @Composable ColumnScope.() -> Unit | Content shown when expanded | - | Yes |

### InputField Properties

| Property Name | Type | Description | Default Value | Required |
| ----------------- | ------------------------- | ------------------------------------ | -------------------- | -------- |
| query | String | Text content in search field | - | Yes |
| onQueryChange | (String) -> Unit | Callback when text content changes | - | Yes |
| label | String | Placeholder text when empty | "" | No |
| onSearch | (String) -> Unit | Callback when search is executed | - | Yes |
| expanded | Boolean | Whether in expanded state | - | Yes |
| onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes |
| label | String | Placeholder text when empty | "" | No |
| modifier | Modifier | Modifier applied to the input field | Modifier | No |
| enabled | Boolean | Whether search field is enabled | true | No |
| insideMargin | DpSize | Internal padding | DpSize(12.dp, 12.dp) | No |
| leadingIcon | @Composable (() -> Unit)? | Leading icon | null | No |
| trailingIcon | @Composable (() -> Unit)? | Trailing icon | null | No |
| leadingIcon | @Composable (() -> Unit)? | Leading icon | default search icon | No |
| trailingIcon | @Composable (() -> Unit)? | Trailing icon | default clear button | No |
| interactionSource | MutableInteractionSource? | Interaction source | null | No |

## Advanced Usage
Expand Down
43 changes: 22 additions & 21 deletions docs/zh_CN/components/searchbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,30 +39,31 @@ SearchBar(

### SearchBar 属性

| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
| ------------------ | ---------------------------------- | -------------------------- | -------- | -------- |
| inputField | @Composable () -> Unit | 搜索输入框组件 | - | 是 |
| expanded | Boolean | 是否展开显示搜索结果 | false | 是 |
| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 |
| modifier | Modifier | 应用于搜索栏的修饰符 | Modifier | 否 |
| outsideRightAction | @Composable (() -> Unit)? | 展开时显示在右侧的操作组件 | null | 否 |
| content | @Composable ColumnScope.() -> Unit | 展开时显示的内容 | - | 是 |
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
| ------------------ | ---------------------------------- | -------------------------- | ------------------- | -------- |
| inputField | @Composable () -> Unit | 搜索输入框组件 | - | 是 |
| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 |
| insideMargin | DpSize | 内部边距 | DpSize(12.dp, 0.dp) | 否 |
| modifier | Modifier | 应用于搜索栏的修饰符 | Modifier | 否 |
| expanded | Boolean | 是否展开显示搜索结果 | false | 否 |
| outsideRightAction | @Composable (() -> Unit)? | 展开时显示在右侧的操作组件 | null | 否 |
| content | @Composable ColumnScope.() -> Unit | 展开时显示的内容 | - | 是 |

### InputField 属性

| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
| ----------------- | ------------------------- | -------------------------- | -------------------- | -------- |
| query | String | 搜索框中的文本内容 | - | 是 |
| onQueryChange | (String) -> Unit | 文本内容变化时的回调 | - | 是 |
| onSearch | (String) -> Unit | 执行搜索操作时的回调 | - | 是 |
| expanded | Boolean | 是否处于展开状态 | - | 是 |
| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 |
| label | String | 搜索框为空时显示的提示文本 | "" | 否 |
| enabled | Boolean | 是否启用搜索框 | true | 否 |
| insideMargin | DpSize | 内部边距 | DpSize(12.dp, 12.dp) | 否 |
| leadingIcon | @Composable (() -> Unit)? | 前置图标 | null | 否 |
| trailingIcon | @Composable (() -> Unit)? | 后置图标 | null | 否 |
| interactionSource | MutableInteractionSource? | 交互源 | null | 否 |
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
| ----------------- | ------------------------- | -------------------------- | ------------ | -------- |
| query | String | 搜索框中的文本内容 | - | 是 |
| onQueryChange | (String) -> Unit | 文本内容变化时的回调 | - | 是 |
| label | String | 搜索框为空时显示的提示文本 | "" | 否 |
| onSearch | (String) -> Unit | 执行搜索操作时的回调 | - | 是 |
| expanded | Boolean | 是否处于展开状态 | - | 是 |
| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 |
| modifier | Modifier | 应用于输入框的修饰符 | Modifier | 否 |
| enabled | Boolean | 是否启用搜索框 | true | 否 |
| leadingIcon | @Composable (() -> Unit)? | 前置图标 | 默认放大镜 | 否 |
| trailingIcon | @Composable (() -> Unit)? | 后置图标 | 默认清除按钮 | 否 |
| interactionSource | MutableInteractionSource? | 交互源 | null | 否 |

## 进阶用法

Expand Down
8 changes: 1 addition & 7 deletions example/src/commonMain/kotlin/MainPage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,6 @@ fun MainPage(
item {
SmallTitle(text = "SearchBar")
SearchBar(
modifier = Modifier
.padding(start = 12.dp, end = 12.dp, bottom = 6.dp),
inputField = {
InputField(
query = miuixSearchValue,
Expand All @@ -105,7 +103,7 @@ fun MainPage(
outsideRightAction = {
Text(
modifier = Modifier
.padding(start = 12.dp)
.padding(end = 12.dp)
.clickable(
interactionSource = null,
indication = null
Expand Down Expand Up @@ -161,15 +159,12 @@ fun MainPage(
LazyColumn(
modifier = Modifier
.nestedScroll(topAppBarScrollBehavior.nestedScrollConnection)
.padding(start = 12.dp)
.weight(1f),
contentPadding = PaddingValues(top = padding.calculateTopPadding())
) {
item {
SmallTitle(text = "SearchBar")
SearchBar(
modifier = Modifier
.padding(start = 12.dp, end = 12.dp, bottom = 6.dp),
inputField = {
InputField(
query = miuixSearchValue,
Expand All @@ -183,7 +178,6 @@ fun MainPage(
outsideRightAction = {
Text(
modifier = Modifier
.padding(start = 12.dp)
.clickable(
interactionSource = null,
indication = null
Expand Down
3 changes: 1 addition & 2 deletions example/src/commonMain/kotlin/SecondPage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,7 @@ fun SecondPage(
) {
item {
Card(
modifier = Modifier
.padding(12.dp)
modifier = Modifier.padding(12.dp)
) {
for (i in 0 until ii.value) {
SuperDropdown(
Expand Down
21 changes: 16 additions & 5 deletions miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -13,6 +17,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.text.BasicTextField
Expand Down Expand Up @@ -53,6 +58,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
* @param inputField the input field to input a query in the [SearchBar].
* @param onExpandedChange the callback to be invoked when the [SearchBar]'s expanded state is
* changed.
* @param insideMargin The margin inside the [SearchBar].
* @param modifier the [Modifier] to be applied to the [SearchBar].
* @param expanded whether the [SearchBar] is expanded and showing search results.
* @param outsideRightAction the action to be shown at the right side of the [SearchBar] when it is
Expand All @@ -63,6 +69,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
fun SearchBar(
inputField: @Composable () -> Unit,
onExpandedChange: (Boolean) -> Unit,
insideMargin: DpSize = DpSize(12.dp, 0.dp),
modifier: Modifier = Modifier,
expanded: Boolean = false,
outsideRightAction: @Composable (() -> Unit)? = null,
Expand All @@ -76,11 +83,17 @@ fun SearchBar(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
) {
Box(modifier = Modifier.weight(1f)) {
Box(
modifier = Modifier
.weight(1f)
.padding(vertical = insideMargin.height, horizontal = insideMargin.width)
) {
inputField()
}
AnimatedVisibility(
visible = expanded
visible = expanded,
enter = expandHorizontally() + slideInHorizontally(initialOffsetX = { it }),
exit = shrinkHorizontally() + slideOutHorizontally(targetOffsetX = { it })
) {
outsideRightAction?.invoke()
}
Expand Down Expand Up @@ -115,7 +128,6 @@ fun SearchBar(
* @param enabled the enabled state of this input field. When `false`, this component will not
* respond to user input, and it will appear visually disabled and disabled to accessibility
* services.
* @param insideMargin the margin inside the [InputField].
* @param leadingIcon the leading icon to be displayed at the start of the input field.
* @param trailingIcon the trailing icon to be displayed at the end of the input field.
* @param interactionSource an optional hoisted [MutableInteractionSource] for observing and
Expand All @@ -133,7 +145,6 @@ fun InputField(
onExpandedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
insideMargin: DpSize = DpSize(12.dp, 12.dp),
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
interactionSource: MutableInteractionSource? = null,
Expand Down Expand Up @@ -212,7 +223,7 @@ fun InputField(
Box(
modifier = Modifier
.weight(1f)
.padding(vertical = insideMargin.height),
.heightIn(min = 45.dp),
contentAlignment = Alignment.CenterStart
) {
Text(
Expand Down