library: Support custom dialog/popup layout anim (#71)

---------

Co-Authored-By: YuKongA <[email protected]>

Author: YunZiA

docs/components/listpopup.md

@@ -79,7 +79,7 @@ var showPopup = remember { mutableStateOf(false) }
 ListPopup(
     show = showPopup,
     onDismissRequest = { showPopup.value = false } // Close the popup menu
-    windowDimming = false
+    enableWindowDim = false // Disable dimming layer
 ) {
     ListPopupColumn {
         // Custom content
@@ -97,7 +97,7 @@ ListPopup(
 | popupModifier         | Modifier                    | Modifier applied to the popup list        | Modifier                                   | No       |
 | popupPositionProvider | PopupPositionProvider       | Position provider for the popup           | ListPopupDefaults.DropdownPositionProvider | No       |
 | alignment             | PopupPositionProvider.Align | Alignment of the popup list               | PopupPositionProvider.Align.Right          | No       |
-| windowDimming         | Boolean                     | Enable window dimming when showing popup  | true                                       | No       |
+| enableWindowDim       | Boolean                     | Whether to enable dimming layer           | true                                       | No       |
 | shadowElevation       | Dp                          | Shadow elevation of the popup             | 11.dp                                      | No       |
 | onDismissRequest      | (() -> Unit)?               | Callback when popup is dismissed          | null                                       | No       |
 | maxHeight             | Dp?                         | Maximum height of the popup list          | null (auto-calculated)                     | No       |

docs/components/superdialog.md

@@ -53,6 +53,7 @@ Scaffold {
 | summary                    | String?                | Dialog summary text                            | null                                  | No       |
 | summaryColor               | Color                  | Summary text color                             | SuperDialogDefaults.summaryColor()    | No       |
 | backgroundColor            | Color                  | Dialog background color                        | SuperDialogDefaults.backgroundColor() | No       |
+| enableWindowDim            | Boolean                | Whether to enable dimming layer                | true                                  | No       |
 | onDismissRequest           | (() -> Unit)?          | Callback when dialog is closed                 | null                                  | No       |
 | outsideMargin              | DpSize                 | Dialog external margin                         | SuperDialogDefaults.outsideMargin     | No       |
 | insideMargin               | DpSize                 | Dialog internal content margin                 | SuperDialogDefaults.insideMargin      | No       |

docs/guide/utils.md

@@ -15,7 +15,12 @@ If you use multiple Scaffolds, you need to set the `popupHost` parameter in the
 val showDialogState = remember { mutableStateOf(false) }
 
 DialogLayout(
-    visible = showDialogState
+    visible = showDialogState,     // MutableState<Boolean> to control dialog visibility
+    enterTransition = fadeIn(),    // Optional, custom enter animation for dialog content
+    exitTransition = fadeOut(),    // Optional, custom exit animation for dialog content
+    enableWindowDim = true,        // Optional, whether to enable dimming layer
+    dimEnterTransition = fadeIn(), // Optional, custom enter animation for dim layer
+    dimExitTransition = fadeOut()  // Optional, custom exit animation for dim layer
 ) {
     // Dialog content
 }
@@ -29,9 +34,13 @@ Normally, you don't need to use it actively. See the [SuperDialog](../components
 val showPopupState = remember { mutableStateOf(false) }
 
 PopupLayout(
-    visible = showPopupState,
+    visible = showPopupState,      // MutableState<Boolean> to control popup visibility
+    enterTransition = fadeIn(),    // Optional, custom enter animation for dialog content
+    exitTransition = fadeOut(),    // Optional, custom exit animation for dialog content
+    enableWindowDim = true,        // Optional, whether to enable dimming layer
+    dimEnterTransition = fadeIn(), // Optional, custom enter animation for dim layer
+    dimExitTransition = fadeOut()  // Optional, custom exit animation for dim layer
     transformOrigin = { TransformOrigin.Center }, // Transform origin for the popup
-    windowDimming = true // Dim the background
 ) {
     // Popup content
 }

docs/zh_CN/components/listpopup.md

@@ -80,7 +80,7 @@ var showPopup = remember { mutableStateOf(false) }
 ListPopup(
     show = showPopup,
     onDismissRequest = { showPopup.value = false } // 关闭弹出菜单
-    windowDimming = false
+    enableWindowDim = false // 禁用遮罩层
 ) {
     ListPopupColumn {
         // 自定义内容
@@ -98,7 +98,7 @@ ListPopup(
 | popupModifier         | Modifier                    | 应用于弹出列表的修饰符         | Modifier                                   | 否       |
 | popupPositionProvider | PopupPositionProvider       | 弹出列表的位置提供者           | ListPopupDefaults.DropdownPositionProvider | 否       |
 | alignment             | PopupPositionProvider.Align | 弹出列表的对齐方式             | PopupPositionProvider.Align.Right          | 否       |
-| windowDimming         | Boolean                     | 是否在显示弹出列表时使窗口变暗 | true                                       | 否       |
+| enableWindowDim       | Boolean                     | 是否启用遮罩层                 | true                                       | 否       |
 | shadowElevation       | Dp                          | 弹出列表的阴影高度             | 11.dp                                      | 否       |
 | onDismissRequest      | (() -> Unit)?               | 弹出列表消失时的回调函数       | null                                       | 否       |
 | maxHeight             | Dp?                         | 弹出列表的最大高度             | null (自动计算)                            | 否       |

docs/zh_CN/components/superdialog.md

@@ -53,6 +53,7 @@ Scaffold {
 | summary                    | String?                | 对话框的摘要说明             | null                                  | 否       |
 | summaryColor               | Color                  | 摘要文本的颜色               | SuperDialogDefaults.summaryColor()    | 否       |
 | backgroundColor            | Color                  | 对话框背景色                 | SuperDialogDefaults.backgroundColor() | 否       |
+| enableWindowDim            | Boolean                | 是否启用遮罩层               | true                                  | 否       |
 | onDismissRequest           | (() -> Unit)?          | 对话框关闭时的回调函数       | null                                  | 否       |
 | outsideMargin              | DpSize                 | 对话框外部边距               | SuperDialogDefaults.outsideMargin     | 否       |
 | insideMargin               | DpSize                 | 对话框内部内容的边距         | SuperDialogDefaults.insideMargin      | 否       |

docs/zh_CN/guide/utils.md

@@ -15,7 +15,12 @@ Miuix 提供了一系列工具函数，帮助您更高效地开发应用程序
 val showDialogState = remember { mutableStateOf(false) }
 
 DialogLayout(
-    visible = showDialogState
+    visible = showDialogState,          // 控制对话框显示状态
+    enterTransition = fadeIn(),         // 可选，自定义对话框进入动画
+    exitTransition = fadeOut(),         // 可选，自定义对话框对话框退出动画
+    enableWindowDim = true,             // 可选，是否启用遮罩层
+    dimEnterTransition = fadeIn(),      // 可选，自定义遮罩层进入动画
+    dimExitTransition = fadeOut()       // 可选，自定义遮罩层退出动画
 ) {
     // 对话框内容
 }
@@ -30,9 +35,13 @@ DialogLayout(
 val showPopupState = remember { mutableStateOf(false) }
 
 PopupLayout(
-    visible = showPopupState,
+    visible = showPopupState,           // 控制弹出窗口显示状态
+    enterTransition = fadeIn(),         // 可选，自定义对话框进入动画
+    exitTransition = fadeOut(),         // 可选，自定义对话框对话框退出动画
+    enableWindowDim = true,             // 可选，是否启用遮罩层
+    dimEnterTransition = fadeIn(),      // 可选，自定义遮罩层进入动画
+    dimExitTransition = fadeOut()       // 可选，自定义遮罩层退出动画
     transformOrigin = { TransformOrigin.Center }, // 弹出窗口的起始位置
-    windowDimming = true // 背景压暗
 ) {
     // 弹出窗口内容
 }

example/src/commonMain/kotlin/UITest.kt

@@ -407,8 +407,10 @@ private fun TopAppBarActions(
             popupPositionProvider = ListPopupDefaults.ContextMenuPositionProvider,
             alignment = PopupPositionProvider.Align.TopRight,
             onDismissRequest = {
+                showTopPopup.value = false
                 onPopupExpandedChange(false)
-            }
+            },
+            enableWindowDim = false
         ) {
             ListPopupColumn {
                 items.take(3).forEachIndexed { index, navigationItem ->

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

@@ -52,7 +52,7 @@ import kotlin.math.min
  * @param popupModifier The modifier to be applied to the [ListPopup].
  * @param popupPositionProvider The [PopupPositionProvider] of the [ListPopup].
  * @param alignment The alignment of the [ListPopup].
- * @param windowDimming Whether to dim the window when the [ListPopup] is shown.
+ * @param enableWindowDim Whether to enable window dimming when the [ListPopup] is shown.
  * @param shadowElevation The elevation of the shadow of the [ListPopup].
  * @param onDismissRequest The callback when the [ListPopup] is dismissed.
  * @param maxHeight The maximum height of the [ListPopup]. If null, the height will be calculated automatically.
@@ -65,7 +65,7 @@ fun ListPopup(
     popupModifier: Modifier = Modifier,
     popupPositionProvider: PopupPositionProvider = ListPopupDefaults.DropdownPositionProvider,
     alignment: PopupPositionProvider.Align = PopupPositionProvider.Align.Right,
-    windowDimming: Boolean = true,
+    enableWindowDim: Boolean = true,
     shadowElevation: Dp = 11.dp,
     onDismissRequest: (() -> Unit)? = null,
     maxHeight: Dp? = null,
@@ -93,10 +93,6 @@ fun ListPopup(
     var popupMargin by remember { mutableStateOf(IntRect.Zero) }
     var transformOrigin by remember { mutableStateOf(TransformOrigin.Center) }
 
-    BackHandler(enabled = show.value) {
-        onDismissRequest?.invoke()
-    }
-
     DisposableEffect(popupPositionProvider, alignment) {
         val popupMargins = popupPositionProvider.getMargins()
         popupMargin = with(density) {
@@ -120,66 +116,7 @@ fun ListPopup(
         onDispose {}
     }
 
-    if (show.value) {
-        PopupLayout(
-            visible = show,
-            transformOrigin = { transformOrigin },
-            windowDimming = windowDimming
-        ) {
-            val currentContent by rememberUpdatedState(content)
-            val currentOffset by rememberUpdatedState(offset)
-            val shape = remember { derivedStateOf { SmoothRoundedCornerShape(16.dp) } }
-            val elevationPx = with(density) { shadowElevation.toPx() }
-            Box(
-                modifier = popupModifier
-                    .pointerInput(Unit) {
-                        detectTapGestures {
-                            onDismissRequest?.invoke()
-                        }
-                    }
-                    .layout { measurable, constraints ->
-                        val placeable = measurable.measure(
-                            constraints.copy(
-                                minWidth = if (minWidth.roundToPx() <= windowSize.width) minWidth.roundToPx() else windowSize.width,
-                                minHeight = if (50.dp.roundToPx() <= windowSize.height) 50.dp.roundToPx() else windowSize.height,
-                                maxHeight = maxHeight?.roundToPx()?.coerceAtLeast(50.dp.roundToPx())
-                                    ?: (windowBounds.height - popupMargin.top - popupMargin.bottom).coerceAtLeast(50.dp.roundToPx()),
-                                maxWidth = if (minWidth.roundToPx() <= windowSize.width) windowSize.width else minWidth.roundToPx()
-                            )
-                        )
-                        popupContentSize = IntSize(placeable.width, placeable.height)
-                        offset = popupPositionProvider.calculatePosition(
-                            parentBounds,
-                            windowBounds,
-                            layoutDirection,
-                            popupContentSize,
-                            popupMargin,
-                            alignment
-                        )
-                        layout(constraints.maxWidth, constraints.maxHeight) {
-                            placeable.place(currentOffset)
-                        }
-                    }
-            ) {
-                Box(
-                    Modifier
-                        .graphicsLayer(
-                            clip = true,
-                            shape = shape.value,
-                            shadowElevation = elevationPx,
-                            ambientShadowColor = MiuixTheme.colorScheme.windowDimming,
-                            spotShadowColor = MiuixTheme.colorScheme.windowDimming
-                        )
-                        .background(MiuixTheme.colorScheme.surface)
-                ) {
-                    currentContent()
-                }
-            }
-        }
-    }
-
     Layout(
-        content = {},
         modifier = Modifier.onGloballyPositioned { childCoordinates ->
             val parentCoordinates = childCoordinates.parentLayoutCoordinates!!
             val positionInWindow = parentCoordinates.positionInWindow()
@@ -212,6 +149,66 @@ fun ListPopup(
     ) { _, _ ->
         layout(0, 0) {}
     }
+
+    PopupLayout(
+        visible = show,
+        enableWindowDim = enableWindowDim,
+        transformOrigin = { transformOrigin },
+    ) {
+        val currentContent by rememberUpdatedState(content)
+        val currentOffset by rememberUpdatedState(offset)
+        val shape = remember { derivedStateOf { SmoothRoundedCornerShape(16.dp) } }
+        val elevationPx = with(density) { shadowElevation.toPx() }
+        Box(
+            modifier = popupModifier
+                .pointerInput(Unit) {
+                    detectTapGestures {
+                        onDismissRequest?.invoke()
+                    }
+                }
+                .layout { measurable, constraints ->
+                    val placeable = measurable.measure(
+                        constraints.copy(
+                            minWidth = if (minWidth.roundToPx() <= windowSize.width) minWidth.roundToPx() else windowSize.width,
+                            minHeight = if (50.dp.roundToPx() <= windowSize.height) 50.dp.roundToPx() else windowSize.height,
+                            maxHeight = maxHeight?.roundToPx()?.coerceAtLeast(50.dp.roundToPx())
+                                ?: (windowBounds.height - popupMargin.top - popupMargin.bottom).coerceAtLeast(50.dp.roundToPx()),
+                            maxWidth = if (minWidth.roundToPx() <= windowSize.width) windowSize.width else minWidth.roundToPx()
+                        )
+                    )
+                    popupContentSize = IntSize(placeable.width, placeable.height)
+                    offset = popupPositionProvider.calculatePosition(
+                        parentBounds,
+                        windowBounds,
+                        layoutDirection,
+                        popupContentSize,
+                        popupMargin,
+                        alignment
+                    )
+                    layout(constraints.maxWidth, constraints.maxHeight) {
+                        placeable.place(currentOffset)
+                    }
+                }
+        ) {
+            Box(
+                Modifier
+                    .graphicsLayer(
+                        clip = true,
+                        shape = shape.value,
+                        shadowElevation = elevationPx,
+                        ambientShadowColor = MiuixTheme.colorScheme.windowDimming,
+                        spotShadowColor = MiuixTheme.colorScheme.windowDimming
+                    )
+                    .background(MiuixTheme.colorScheme.surface)
+            ) {
+                currentContent()
+            }
+        }
+    }
+
+    BackHandler(enabled = show.value) {
+        onDismissRequest?.invoke()
+    }
 }
 
 /**

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

@@ -185,7 +185,7 @@ fun RefreshHeader(
             when (pullToRefreshState.refreshState) {
                 RefreshState.Idle -> 0f
                 RefreshState.Pulling -> if (pullToRefreshState.pullProgress > 0.6f) (pullToRefreshState.pullProgress - 0.5f) * 2f else 0f
-                RefreshState.RefreshComplete -> (1f - refreshCompleteAnimProgress * 1.8f).coerceAtLeast(0f)
+                RefreshState.RefreshComplete -> (1f - refreshCompleteAnimProgress * 1.95f).coerceAtLeast(0f)
                 else -> 1f
             }
         }
@@ -422,11 +422,12 @@ private fun DrawScope.drawRefreshCompleteState(
     refreshCompleteProgress: Float
 ) {
     val animatedRadius = radius * ((1f - refreshCompleteProgress).coerceAtLeast(0.9f))
-    val alphaColor = color.copy(alpha = (1f - refreshCompleteProgress - 0.2f).coerceAtLeast(0f))
+    val alphaColor = color.copy(alpha = (1f - refreshCompleteProgress - 0.35f).coerceAtLeast(0f))
+    val y = center.y - radius - strokeWidth + animatedRadius
     drawCircle(
         color = alphaColor,
         radius = animatedRadius,
-        center = center,
+        center = Offset(center.x,y),
         style = Stroke(strokeWidth, cap = StrokeCap.Round)
     )
 }