library: Refactor press feedback using custom pressable (#101)

Voemp · web-flow · commit 2981658a92b4 · 2025-08-14T11:22:57.000+08:00
* library: Refactor press feedback using custom pressable
* docs: Update press feedback effects documentation
* library: Fix PressFeedback interactionSource nullable issues
diff --git a/docs/guide/utils.md b/docs/guide/utils.md
@@ -127,81 +127,54 @@ LazyColumn(
 
 *   `hapticFeedbackType`: Specifies the type of haptic feedback to be performed when the scroll reaches its end. Defaults to `HapticFeedbackType.TextHandleMove`. You can use other types available in `androidx.compose.ui.hapticfeedback.HapticFeedbackType`.
 
-## Press Feedback Effects
+## Press Feedback Effects (Modifier.pressable())
 
 Miuix provides visual feedback effects to enhance user interaction experience, improving operability through tactile-like responses.
 
-### Sink Effect
-
-The `pressSink` modifier applies a "sink" visual feedback when the component is pressed, by smoothly scaling down the component.
+Supports use with responsive modifiers such as `Modifier.clickable()`, and `SinkFeedback` is the default effect.
 
 ```kotlin
-val interactionSource = remember { MutableInteractionSource() }
-
 Box(
     modifier = Modifier
-        .clickable(interactionSource = interactionSource, indication = null)
-        .pressSink(interactionSource)
+        .pressable()
         .background(Color.Blue)
         .size(100.dp)
 )
 ```
 
-### Tilt Effect
+### Sink Effect
 
-The `pressTilt` modifier applies a "tilt" effect based on the position where the user pressed the component. The tilt direction is determined by touch offset, giving the effect that one corner "sinks" while the other "static".
+The `SinkFeedback` indication applies a "sink" visual when the component is pressed, which is achieved by smoothly scaling the component.
 
-```kotlin
-val interactionSource = remember { MutableInteractionSource() }
+When `interactionSource` is `null`, internal `MutableInteractionSource` is lazily created only when needed, which reduces clickable performance costs during the combination.
 
+```kotlin
 Box(
     modifier = Modifier
-        .clickable(interactionSource = interactionSource, indication = null)
-        .pressTilt(interactionSource)
-        .background(Color.Green)
+        .pressable(interactionSource = null, indication = SinkFeedback())
+        .background(Color.Blue)
         .size(100.dp)
 )
 ```
 
-### Prerequisites for Triggering Press Feedback
-
-Press feedback effects require detecting `interactionSource.collectIsPressedAsState()` to be triggered.
-
-You can use responsive modifiers like `Modifier.clickable()` to add `PressInteraction.Press` to the `interactionSource` and trigger press feedback effects.
-
-However, it's recommended to use the method below to add `PressInteraction.Press` to the `interactionSource` for faster response triggering of press feedback effects.
-
-```kotlin
-val interactionSource = remember { MutableInteractionSource() }
-
-Box(
-    modifier = Modifier
-        .pointerInput(Unit) {
-            awaitEachGesture {
-                val pressInteraction: PressInteraction.Press
-                awaitFirstDown().also {
-                    pressInteraction = PressInteraction.Press(it.position)
-                    interactionSource.tryEmit(pressInteraction)
-                }
-                if (waitForUpOrCancellation() == null) {
-                    interactionSource.tryEmit(PressInteraction.Cancel(pressInteraction))
-                } else {
-                    interactionSource.tryEmit(PressInteraction.Release(pressInteraction))
-                }
-            }
-        }
-)
-```
+### Tilt Effect
 
-If you want to use both `Modifier.clickable()` and instant feedback, you can pass the `immediate = true` parameter.
+The `TiltFeedback` indication applies a "tilt" effect based on the position of the user pressing the component. The tilt direction is determined by the touch offset, so that one corner "sinks" while the other corner remains "still".
 
 ```kotlin
 val interactionSource = remember { MutableInteractionSource() }
 
 Box(
     modifier = Modifier
-        .clickable(interactionSource = interactionSource, indication = null, onClick = {})
-        .pressSink(interactionSource, immediate = true)
+        .pressable(interactionSource = interactionSource, indication = TiltFeedback())
+        .combinedClickable(
+            interactionSource = interactionSource,
+            indication = LocalIndication.current,
+            onClick = {},
+            onLongClick = {}
+        )
+        .background(Color.Green)
+        .size(100.dp)
 )
 ```
 
diff --git a/docs/zh_CN/guide/utils.md b/docs/zh_CN/guide/utils.md
@@ -127,81 +127,54 @@ LazyColumn(
 
 *   `hapticFeedbackType`: 指定滚动到达末端时要执行的触觉反馈类型。默认为 `HapticFeedbackType.TextHandleMove`。您可以使用 `androidx.compose.ui.hapticfeedback.HapticFeedbackType` 中可用的其他类型。
 
-## 按压反馈效果 (PressFeedback)
+## 按压反馈效果 (Modifier.pressable())
 
 Miuix 提供了视觉反馈效果来增强用户交互体验，通过类似触觉的响应提升操作感。
 
-### 下沉效果
-
-`pressSink` 修饰符会在组件被按下时应用一种“下沉”视觉效果，通过平滑缩放组件实现。
+支持与 `Modifier.clickable()` 等响应式修饰符一起使用，`SinkFeedback` 为默认效果。
 
 ```kotlin
-val interactionSource = remember { MutableInteractionSource() }
-
 Box(
     modifier = Modifier
-        .clickable(interactionSource = interactionSource, indication = null)
-        .pressSink(interactionSource)
+        .pressable()
         .background(Color.Blue)
         .size(100.dp)
 )
 ```
 
-### 倾斜效果
+### 下沉效果
 
-`pressTilt` 修饰符会根据用户按压组件的位置应用一种“倾斜”效果。倾斜方向由触摸偏移决定，使一角“下沉”而另一角保持“静止”。
+`SinkFeedback` 指示会在组件被按下时应用一种“下沉”视觉效果，通过平滑缩放组件实现。
 
-```kotlin
-val interactionSource = remember { MutableInteractionSource() }
+`interactionSource` 为 `null` 时，仅在需要时才会懒惰地创建内部 `MutableInteractionSource`，这会降低组合过程中可点击的性能成本。
 
+```kotlin
 Box(
     modifier = Modifier
-        .clickable(interactionSource = interactionSource, indication = null)
-        .pressTilt(interactionSource)
-        .background(Color.Green)
+        .pressable(interactionSource = null, indication = SinkFeedback())
+        .background(Color.Blue)
         .size(100.dp)
 )
 ```
 
-### 触发按压反馈效果的前提
-
-按压反馈效果需要检测 `interactionSource.collectIsPressedAsState()` 以触发。
-
-可以使用 `Modifier.clickable()` 等响应式修饰符来为 `interactionSource` 添加 `PressInteraction.Press` 以触发按压反馈效果。
-
-但更推荐使用下面的方法来为 `interactionSource` 添加 `PressInteraction.Press` 以获得更快响应的触发按压反馈效果。
-
-```kotlin
-val interactionSource = remember { MutableInteractionSource() }
-
-Box(
-    modifier = Modifier
-        .pointerInput(Unit) {
-            awaitEachGesture {
-                val pressInteraction: PressInteraction.Press
-                awaitFirstDown().also {
-                    pressInteraction = PressInteraction.Press(it.position)
-                    interactionSource.tryEmit(pressInteraction)
-                }
-                if (waitForUpOrCancellation() == null) {
-                    interactionSource.tryEmit(PressInteraction.Cancel(pressInteraction))
-                } else {
-                    interactionSource.tryEmit(PressInteraction.Release(pressInteraction))
-                }
-            }
-        }
-)
-```
+### 倾斜效果
 
-如果既想使用 `Modifier.clickable()` 又想要即时的反馈效果，可以传递 `immediate = true` 参数。
+`TiltFeedback` 指示会根据用户按压组件的位置应用一种“倾斜”效果。倾斜方向由触摸偏移决定，使一角“下沉”而另一角保持“静止”。
 
 ```kotlin
 val interactionSource = remember { MutableInteractionSource() }
 
 Box(
     modifier = Modifier
-        .clickable(interactionSource = interactionSource, indication = null, onClick = {})
-        .pressSink(interactionSource, immediate = true)
+        .pressable(interactionSource = interactionSource, indication = TiltFeedback())
+        .combinedClickable(
+            interactionSource = interactionSource,
+            indication = LocalIndication.current,
+            onClick = {},
+            onLongClick = {}
+        )
+        .background(Color.Green)
+        .size(100.dp)
 )
 ```
 
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt
@@ -29,8 +29,9 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.CornerSmoothness
 import top.yukonga.miuix.kmp.utils.G2RoundedCornerShape
 import top.yukonga.miuix.kmp.utils.PressFeedbackType
-import top.yukonga.miuix.kmp.utils.pressSink
-import top.yukonga.miuix.kmp.utils.pressTilt
+import top.yukonga.miuix.kmp.utils.SinkFeedback
+import top.yukonga.miuix.kmp.utils.TiltFeedback
+import top.yukonga.miuix.kmp.utils.pressable
 
 /**
  * A [Card] component with Miuix style.
@@ -47,9 +48,9 @@ import top.yukonga.miuix.kmp.utils.pressTilt
 @Composable
 fun Card(
     modifier: Modifier = Modifier,
-    colors: CardColors = CardDefaults.defaultColors(),
     cornerRadius: Dp = CardDefaults.CornerRadius,
     insideMargin: PaddingValues = CardDefaults.InsideMargin,
+    colors: CardColors = CardDefaults.defaultColors(),
     content: @Composable ColumnScope.() -> Unit,
 ) {
     BasicCard(
@@ -94,16 +95,20 @@ fun Card(
 ) {
     val interactionSource = remember { MutableInteractionSource() }
 
-    val pressFeedbackModifier = remember(pressFeedbackType, interactionSource) {
+    val pressFeedback = remember(pressFeedbackType) {
         when (pressFeedbackType) {
-            PressFeedbackType.None -> Modifier
-            PressFeedbackType.Sink -> Modifier.pressSink(interactionSource, immediate = true)
-            PressFeedbackType.Tilt -> Modifier.pressTilt(interactionSource, immediate = true)
+            PressFeedbackType.None -> null
+            PressFeedbackType.Sink -> SinkFeedback()
+            PressFeedbackType.Tilt -> TiltFeedback()
         }
     }
 
     BasicCard(
-        modifier = modifier.then(pressFeedbackModifier),
+        modifier = modifier.pressable(
+            interactionSource = if (pressFeedback != null) interactionSource else null,
+            indication = pressFeedback,
+            delay = null
+        ),
         cornerRadius = cornerRadius,
         colors = colors
     ) {
@@ -191,9 +196,8 @@ class CardColors(
     fun copy(
         color: Color = this.color,
         contentColor: Color = this.contentColor,
-    ) =
-        CardColors(
-            color.takeOrElse { this.color },
-            contentColor.takeOrElse { this.contentColor },
-        )
+    ) = CardColors(
+        color.takeOrElse { this.color },
+        contentColor.takeOrElse { this.contentColor },
+    )
 }
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt
@@ -9,7 +9,6 @@ import androidx.compose.animation.core.FastOutSlowInEasing
 import androidx.compose.animation.core.keyframes
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.layout.size
@@ -39,7 +38,7 @@ import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.CapsuleShape
-import top.yukonga.miuix.kmp.utils.pressSink
+import top.yukonga.miuix.kmp.utils.pressable
 
 /**
  * A [Checkbox] component with Miuix style.
@@ -59,7 +58,6 @@ fun Checkbox(
     enabled: Boolean = true,
 ) {
     val hapticFeedback = LocalHapticFeedback.current
-    val interactionSource = remember { MutableInteractionSource() }
 
     val backgroundColor by animateColorAsState(
         targetValue = if (checked) colors.checkedBackgroundColor(enabled) else colors.uncheckedBackgroundColor(enabled),
@@ -95,7 +93,7 @@ fun Checkbox(
         modifier = modifier
             .wrapContentSize(Alignment.Center)
             .requiredSize(25.5.dp)
-            .pressSink(interactionSource, immediate = true)
+            .pressable(enabled = enabled, delay = null)
             .clip(CapsuleShape)
             .drawBehind {
                 drawCircle(backgroundColor)
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/PressFeedback.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/PressFeedback.kt
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/Pressable.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/Pressable.kt
