Skip to content

Commit c4d1e4c

Browse files
YuKongAYuKongA
committed
library: Improve SuperBottomSheet component
1 parent 03827cf commit c4d1e4c

File tree

8 files changed

+237
-83
lines changed

8 files changed

+237
-83
lines changed

‎docs/components/superbottomsheet.md‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,16 @@ Scaffold {
4848
| show | MutableState\<Boolean> | State object to control bottom sheet visibility | - | Yes |
4949
| modifier | Modifier | Modifier applied to the bottom sheet | Modifier | No |
5050
| title | String? | Bottom sheet title | null | No |
51+
| leftAction | @Composable (() -> Unit?)? | Optional composable for left action (e.g., close button) | null | No |
52+
| rightAction | @Composable (() -> Unit?)? | Optional composable for right action (e.g., submit button) | null | No |
5153
| backgroundColor | Color | Bottom sheet background color | SuperBottomSheetDefaults.backgroundColor() | No |
5254
| enableWindowDim | Boolean | Whether to enable dimming layer | true | No |
5355
| onDismissRequest | (() -> Unit)? | Callback when bottom sheet is closed | null | No |
5456
| outsideMargin | DpSize | Bottom sheet external margin | SuperBottomSheetDefaults.outsideMargin | No |
5557
| insideMargin | DpSize | Bottom sheet internal content margin | SuperBottomSheetDefaults.insideMargin | No |
5658
| defaultWindowInsetsPadding | Boolean | Whether to apply default window insets padding | true | No |
5759
| dragHandleColor | Color | Drag indicator color | SuperBottomSheetDefaults.dragHandleColor() | No |
58-
| content | @Composable ColumnScope.() -> Unit | Bottom sheet content | - | Yes |
60+
| content | @Composable () -> Unit | Bottom sheet content | - | Yes |
5961

6062
### SuperBottomSheetDefaults Object
6163

@@ -177,6 +179,45 @@ Scaffold {
177179
}
178180
```
179181

182+
### Bottom Sheet with Action Buttons
183+
184+
```kotlin
185+
var showBottomSheet = remember { mutableStateOf(false) }
186+
187+
Scaffold {
188+
TextButton(
189+
text = "Show Bottom Sheet with Actions",
190+
onClick = { showBottomSheet.value = true }
191+
)
192+
193+
SuperBottomSheet(
194+
show = showBottomSheet,
195+
title = "Action Sheet",
196+
leftAction = {
197+
TextButton(
198+
text = "Cancel",
199+
onClick = { showBottomSheet.value = false }
200+
)
201+
},
202+
rightAction = {
203+
TextButton(
204+
text = "Confirm",
205+
onClick = {
206+
// Handle confirm action
207+
showBottomSheet.value = false
208+
},
209+
colors = ButtonDefaults.textButtonColorsPrimary()
210+
)
211+
},
212+
onDismissRequest = { showBottomSheet.value = false }
213+
) {
214+
Text("Content with custom header actions")
215+
Spacer(modifier = Modifier.height(16.dp))
216+
Text("Left and right action buttons are displayed in the header")
217+
}
218+
}
219+
```
220+
180221
### Bottom Sheet with Form
181222

182223
```kotlin

‎docs/guide/utils.md‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Miuix provides a series of utility functions to help you develop applications mo
44

55
## Popup Utilities (MiuixPopupUtils)
66

7-
`MiuixPopupUtils` is a utility class for displaying popup layout and dialog layout. This class is already integrated into the `Scaffold` component and can be used directly.
7+
`MiuixPopupUtils` is a utility class for displaying dialog layout and popup layout. This class is already integrated into the `Scaffold` component and can be used directly.
88

99
If you use multiple Scaffolds, you need to set the `popupHost` parameter in the subordinate `Scaffold` to `null`.
1010

@@ -15,17 +15,20 @@ If you use multiple Scaffolds, you need to set the `popupHost` parameter in the
1515
val showDialogState = remember { mutableStateOf(false) }
1616

1717
DialogLayout(
18-
visible = showDialogState, // MutableState<Boolean> to control dialog visibility
19-
enterTransition = fadeIn(), // Optional, custom enter animation for dialog content
20-
exitTransition = fadeOut(), // Optional, custom exit animation for dialog content
21-
enableWindowDim = true, // Optional, whether to enable dimming layer
22-
dimEnterTransition = fadeIn(), // Optional, custom enter animation for dim layer
23-
dimExitTransition = fadeOut() // Optional, custom exit animation for dim layer
18+
visible = showDialogState, // MutableState<Boolean> to control dialog visibility
19+
enterTransition = fadeIn(), // Optional, custom enter animation for dialog content
20+
exitTransition = fadeOut(), // Optional, custom exit animation for dialog content
21+
enableWindowDim = true, // Optional, whether to enable dimming layer, defaults to true
22+
enableAutoLargeScreen = true, // Optional, whether to auto-detect large screen and adjust animations
23+
dimEnterTransition = fadeIn(), // Optional, custom enter animation for dim layer
24+
dimExitTransition = fadeOut(), // Optional, custom exit animation for dim layer
25+
dimAlpha = null // Optional, MutableState<Float> to dynamically control dim layer alph (0f-1f)
2426
) {
2527
// Dialog content
2628
}
2729
```
28-
Normally, you don't need to use it actively. See the [SuperDialog](../components/superdialog.md) documentation for details.
30+
31+
Normally, you don't need to use it actively. See the [SuperDialog](../components/superdialog.md) or [SuperBottomSheet](../components/basiccomponent.md) documentation for details.
2932

3033
### PopupLayout
3134

@@ -34,13 +37,13 @@ Normally, you don't need to use it actively. See the [SuperDialog](../components
3437
val showPopupState = remember { mutableStateOf(false) }
3538

3639
PopupLayout(
37-
visible = showPopupState, // MutableState<Boolean> to control popup visibility
38-
enterTransition = fadeIn(), // Optional, custom enter animation for dialog content
39-
exitTransition = fadeOut(), // Optional, custom exit animation for dialog content
40-
enableWindowDim = true, // Optional, whether to enable dimming layer
41-
dimEnterTransition = fadeIn(), // Optional, custom enter animation for dim layer
42-
dimExitTransition = fadeOut(), // Optional, custom exit animation for dim layer
43-
transformOrigin = { TransformOrigin.Center }, // Transform origin for the popup
40+
visible = showPopupState, // MutableState<Boolean> to control popup visibility
41+
enterTransition = fadeIn(), // Optional, custom enter animation for popup content
42+
exitTransition = fadeOut(), // Optional, custom exit animation for popup content
43+
enableWindowDim = true, // Optional, whether to enable dimming layer, defaults to true
44+
dimEnterTransition = fadeIn(), // Optional, custom enter animation for dim layer
45+
dimExitTransition = fadeOut(), // Optional, custom exit animation for dim layer
46+
transformOrigin = { TransformOrigin.Center } // Transform origin for scale transformations, defaults to TransformOrigin.Center
4447
) {
4548
// Popup content
4649
}

‎docs/zh_CN/components/superbottomsheet.md‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,16 @@ Scaffold {
4848
| show | MutableState\<Boolean> | 控制底部抽屉显示状态的状态对象 | - | 是 |
4949
| modifier | Modifier | 应用于底部抽屉的修饰符 | Modifier | 否 |
5050
| title | String? | 底部抽屉的标题 | null | 否 |
51+
| leftAction | @Composable (() -> Unit?)? | 可选的左侧操作按钮(例如关闭按钮) | null | 否 |
52+
| rightAction | @Composable (() -> Unit?)? | 可选的右侧操作按钮(例如提交按钮) | null | 否 |
5153
| backgroundColor | Color | 底部抽屉背景色 | SuperBottomSheetDefaults.backgroundColor() | 否 |
5254
| enableWindowDim | Boolean | 是否启用遮罩层 | true | 否 |
5355
| onDismissRequest | (() -> Unit)? | 底部抽屉关闭时的回调函数 | null | 否 |
5456
| outsideMargin | DpSize | 底部抽屉外部边距 | SuperBottomSheetDefaults.outsideMargin | 否 |
5557
| insideMargin | DpSize | 底部抽屉内部内容的边距 | SuperBottomSheetDefaults.insideMargin | 否 |
5658
| defaultWindowInsetsPadding | Boolean | 是否应用默认窗口插入内边距 | true | 否 |
5759
| dragHandleColor | Color | 拖拽指示器的颜色 | SuperBottomSheetDefaults.dragHandleColor() | 否 |
58-
| content | @Composable ColumnScope.() -> Unit | 底部抽屉的内容 | - | 是 |
60+
| content | @Composable () -> Unit | 底部抽屉的内容 | - | 是 |
5961

6062
### SuperBottomSheetDefaults 对象
6163

@@ -177,6 +179,45 @@ Scaffold {
177179
}
178180
```
179181

182+
### 带操作按钮的底部抽屉
183+
184+
```kotlin
185+
var showBottomSheet = remember { mutableStateOf(false) }
186+
187+
Scaffold {
188+
TextButton(
189+
text = "显示带操作按钮的底部抽屉",
190+
onClick = { showBottomSheet.value = true }
191+
)
192+
193+
SuperBottomSheet(
194+
show = showBottomSheet,
195+
title = "操作面板",
196+
leftAction = {
197+
TextButton(
198+
text = "取消",
199+
onClick = { showBottomSheet.value = false }
200+
)
201+
},
202+
rightAction = {
203+
TextButton(
204+
text = "确认",
205+
onClick = {
206+
// 处理确认操作
207+
showBottomSheet.value = false
208+
},
209+
colors = ButtonDefaults.textButtonColorsPrimary()
210+
)
211+
},
212+
onDismissRequest = { showBottomSheet.value = false }
213+
) {
214+
Text("带有自定义标题栏操作按钮的内容")
215+
Spacer(modifier = Modifier.height(16.dp))
216+
Text("左右两侧的操作按钮显示在标题栏中")
217+
}
218+
}
219+
```
220+
180221
### 带表单的底部抽屉
181222

182223
```kotlin

‎docs/zh_CN/guide/utils.md‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,40 +8,42 @@ Miuix 提供了一系列工具函数，帮助您更高效地开发应用程序
88

99
如果你使用多个 Scaffold，则需要将下属 `Scaffold` 中的 `popupHost` 参数设为 `null`。
1010

11-
### 对话框布局
11+
### 对话框布局 (DialogLayout)
1212

1313
```kotlin
1414
// 需要一个 MutableState<Boolean> 来控制显示状态
1515
val showDialogState = remember { mutableStateOf(false) }
1616

1717
DialogLayout(
18-
visible = showDialogState, // 控制对话框显示状态
19-
enterTransition = fadeIn(), // 可选，自定义对话框进入动画
20-
exitTransition = fadeOut(), // 可选，自定义对话框对话框退出动画
21-
enableWindowDim = true, // 可选，是否启用遮罩层
22-
dimEnterTransition = fadeIn(), // 可选，自定义遮罩层进入动画
23-
dimExitTransition = fadeOut() // 可选，自定义遮罩层退出动画
18+
visible = showDialogState, // MutableState<Boolean> 用于控制对话框的可见性
19+
enterTransition = fadeIn(), // 可选，对话框内容的自定义进入动画
20+
exitTransition = fadeOut(), // 可选，对话框内容的自定义退出动画
21+
enableWindowDim = true, // 可选，是否启用遮罩层, 默认为 true
22+
enableAutoLargeScreen = true, // 可选，是否自动检测大屏幕并调整动画
23+
dimEnterTransition = fadeIn(), // 可选，遮罩层的自定义进入动画
24+
dimExitTransition = fadeOut(), // 可选，遮罩层的自定义退出动画
25+
dimAlpha = null // 可选，MutableState<Float> 用于动态控制遮罩层透明度 (0f-1f)
2426
) {
2527
// 对话框内容
2628
}
2729
```
2830

29-
正常情况下无需主动使用。详见 [SuperDialog](../components/superdialog.md) 文档。
31+
正常情况下无需主动使用。详见 [SuperDialog](../components/superdialog.md) 或 [SuperBottomSheet](../components//basiccomponent.md) 文档。
3032

31-
### 弹出窗口布局
33+
### 弹出窗口布局 (PopupLayout)
3234

3335
```kotlin
3436
// 需要一个 MutableState<Boolean> 来控制显示状态
3537
val showPopupState = remember { mutableStateOf(false) }
3638

3739
PopupLayout(
38-
visible = showPopupState, // 控制弹出窗口显示状态
39-
enterTransition = fadeIn(), // 可选，自定义对话框进入动画
40-
exitTransition = fadeOut(), // 可选，自定义对话框对话框退出动画
41-
enableWindowDim = true, // 可选，是否启用遮罩层
42-
dimEnterTransition = fadeIn(), // 可选，自定义遮罩层进入动画
43-
dimExitTransition = fadeOut(), // 可选，自定义遮罩层退出动画
44-
transformOrigin = { TransformOrigin.Center }, // 弹出窗口的起始位置
40+
visible = showPopupState, // MutableState<Boolean> 用于控制弹出窗口的可见性
41+
enterTransition = fadeIn(), // 可选，弹出窗口内容的自定义进入动画
42+
exitTransition = fadeOut(), // 可选，弹出窗口内容的自定义退出动画
43+
enableWindowDim = true, // 可选，是否启用遮罩层, 默认为 true
44+
dimEnterTransition = fadeIn(), // 可选，遮罩层的自定义进入动画
45+
dimExitTransition = fadeOut(), // 可选，遮罩层的自定义退出动画
46+
transformOrigin = { TransformOrigin.Center } // 用于缩放变换的变换原点, 默认为 TransformOrigin.Center
4547
) {
4648
// 弹出窗口内容
4749
}

‎example/src/commonMain/kotlin/component/TextComponent.kt‎

Lines changed: 45 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import top.yukonga.miuix.kmp.basic.Card
3333
import top.yukonga.miuix.kmp.basic.CardDefaults
3434
import top.yukonga.miuix.kmp.basic.Checkbox
3535
import top.yukonga.miuix.kmp.basic.Icon
36+
import top.yukonga.miuix.kmp.basic.IconButton
3637
import top.yukonga.miuix.kmp.basic.SmallTitle
3738
import top.yukonga.miuix.kmp.basic.Switch
3839
import top.yukonga.miuix.kmp.basic.Text
@@ -50,6 +51,8 @@ import top.yukonga.miuix.kmp.extra.SuperDropdown
5051
import top.yukonga.miuix.kmp.extra.SuperSpinner
5152
import top.yukonga.miuix.kmp.extra.SuperSwitch
5253
import top.yukonga.miuix.kmp.icon.MiuixIcons
54+
import top.yukonga.miuix.kmp.icon.icons.useful.Cancel
55+
import top.yukonga.miuix.kmp.icon.icons.useful.Confirm
5356
import top.yukonga.miuix.kmp.icon.icons.useful.Personal
5457
import top.yukonga.miuix.kmp.theme.MiuixTheme
5558

@@ -86,10 +89,26 @@ fun TextComponent(
8689
}
8790
val spinnerOptions = remember {
8891
listOf(
89-
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) }, "Option 1", "Red"),
90-
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF36D167)) }, "Option 2", "Green"),
91-
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF3482FF)) }, "Option 3", "Blue"),
92-
SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFFB21D)) }, "Option 4", "Yellow"),
92+
SpinnerEntry(
93+
icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) },
94+
"Option 1",
95+
"Red"
96+
),
97+
SpinnerEntry(
98+
icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF36D167)) },
99+
"Option 2",
100+
"Green"
101+
),
102+
SpinnerEntry(
103+
icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF3482FF)) },
104+
"Option 3",
105+
"Blue"
106+
),
107+
SpinnerEntry(
108+
icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFFB21D)) },
109+
"Option 4",
110+
"Yellow"
111+
),
93112
)
94113
}
95114

@@ -456,6 +475,28 @@ fun BottomSheet(
456475
show = showBottomSheet,
457476
onDismissRequest = {
458477
showBottomSheet.value = false
478+
},
479+
leftAction = {
480+
IconButton(
481+
onClick = { showBottomSheet.value = false },
482+
) {
483+
Icon(
484+
imageVector = MiuixIcons.Useful.Cancel,
485+
contentDescription = "Cancel",
486+
tint = MiuixTheme.colorScheme.onBackground
487+
)
488+
}
489+
},
490+
rightAction = {
491+
IconButton(
492+
onClick = { showBottomSheet.value = false },
493+
) {
494+
Icon(
495+
imageVector = MiuixIcons.Useful.Confirm,
496+
contentDescription = "Confirm",
497+
tint = MiuixTheme.colorScheme.onBackground
498+
)
499+
}
459500
}
460501
) {
461502
Card(
@@ -478,26 +519,6 @@ fun BottomSheet(
478519
}
479520
)
480521
}
481-
Row(
482-
horizontalArrangement = Arrangement.SpaceBetween
483-
) {
484-
TextButton(
485-
text = "Cancel",
486-
onClick = {
487-
showBottomSheet.value = false
488-
},
489-
modifier = Modifier.weight(1f)
490-
)
491-
Spacer(Modifier.width(20.dp))
492-
TextButton(
493-
text = "Confirm",
494-
onClick = {
495-
showBottomSheet.value = false
496-
},
497-
modifier = Modifier.weight(1f),
498-
colors = ButtonDefaults.textButtonColorsPrimary()
499-
)
500-
}
501522
}
502523
}
503524

‎iosApp/iosApp/Info.plist‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<key>CFBundleShortVersionString</key>
1818
<string>1.0.4</string>
1919
<key>CFBundleVersion</key>
20-
<string>559</string>
20+
<string>560</string>
2121
<key>LSRequiresIPhoneOS</key>
2222
<true/>
2323
<key>CADisableMinimumFrameDurationOnPhone</key>

0 commit comments

Comments
 (0)