Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
12 changes: 12 additions & 0 deletions docs/guide/utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,18 @@ Box(
)
```

If you want to use both `Modifier.clickable()` and instant feedback, you can pass the `immediate = true` parameter.

```kotlin
val interactionSource = remember { MutableInteractionSource() }

Box(
modifier = Modifier
.clickable(interactionSource = interactionSource, indication = null, onClick = {})
.pressSink(interactionSource, immediate = true)
)
```

### Press Feedback Type (`PressFeedbackType`)

The `PressFeedbackType` enum defines different types of visual feedback that can be applied when the component is pressed.
Expand Down
12 changes: 12 additions & 0 deletions docs/zh_CN/guide/utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,18 @@ Box(
)
```

如果既想使用 `Modifier.clickable()` 又想要即时的反馈效果,可以传递 `immediate = true` 参数。

```kotlin
val interactionSource = remember { MutableInteractionSource() }

Box(
modifier = Modifier
.clickable(interactionSource = interactionSource, indication = null, onClick = {})
.pressSink(interactionSource, immediate = true)
)
```

### 按压反馈类型 (PressFeedbackType)

`PressFeedbackType` 枚举定义了组件被按下时可以应用的不同类型的视觉反馈。
Expand Down
10 changes: 3 additions & 7 deletions example/src/commonMain/kotlin/component/OtherComponent.kt
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ import androidx.compose.ui.focus.FocusManager
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
Expand Down Expand Up @@ -481,8 +479,7 @@ fun LazyListScope.otherComponent(
),
insideMargin = PaddingValues(16.dp),
pressFeedbackType = PressFeedbackType.None,
showIndication = true,
onClick = { }
showIndication = true
) {
Text(
color = MiuixTheme.colorScheme.onPrimary,
Expand All @@ -497,7 +494,6 @@ fun LazyListScope.otherComponent(
fontWeight = FontWeight.Normal
)
}
val hapticFeedback = LocalHapticFeedback.current
Row(
modifier = Modifier
.fillMaxWidth()
Expand All @@ -510,7 +506,7 @@ fun LazyListScope.otherComponent(
insideMargin = PaddingValues(16.dp),
pressFeedbackType = PressFeedbackType.Sink,
showIndication = true,
onClick = { },
onClick = { println("Card click") },
content = {
Text(
color = MiuixTheme.colorScheme.onSurface,
Expand All @@ -529,7 +525,7 @@ fun LazyListScope.otherComponent(
modifier = Modifier.weight(1f),
insideMargin = PaddingValues(16.dp),
pressFeedbackType = PressFeedbackType.Tilt,
onLongPress = { hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress) },
onLongPress = { println("Card long press") },
content = {
Text(
color = MiuixTheme.colorScheme.onSurface,
Expand Down
2 changes: 1 addition & 1 deletion iosApp/iosApp/Info.plist
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<key>CFBundleShortVersionString</key>
<string>1.0.4</string>
<key>CFBundleVersion</key>
<string>515</string>
<string>517</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>CADisableMinimumFrameDurationOnPhone</key>
Expand Down
43 changes: 8 additions & 35 deletions miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,8 @@ package top.yukonga.miuix.kmp.basic

import androidx.compose.foundation.LocalIndication
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.awaitEachGesture
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.gestures.waitForUpOrCancellation
import androidx.compose.foundation.hoverable
import androidx.compose.foundation.indication
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
Expand All @@ -26,7 +20,6 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.semantics.isTraversalGroup
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.Dp
Expand Down Expand Up @@ -104,43 +97,23 @@ fun Card(
val pressFeedbackModifier = remember(pressFeedbackType, interactionSource) {
when (pressFeedbackType) {
PressFeedbackType.None -> Modifier
PressFeedbackType.Sink -> Modifier.pressSink(interactionSource)
PressFeedbackType.Tilt -> Modifier.pressTilt(interactionSource)
PressFeedbackType.Sink -> Modifier.pressSink(interactionSource, immediate = true)
PressFeedbackType.Tilt -> Modifier.pressTilt(interactionSource, immediate = true)
}
}

BasicCard(
modifier = modifier
.pointerInput(onClick, onLongPress) {
detectTapGestures(
onTap = { onClick?.invoke() },
onLongPress = { onLongPress?.invoke() }
)
}
.pointerInput(interactionSource) {
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))
}
}
}
.hoverable(interactionSource)
.then(pressFeedbackModifier),
modifier = modifier.then(pressFeedbackModifier),
cornerRadius = cornerRadius,
colors = colors
) {
Column(
modifier = Modifier
.indication(
.combinedClickable(
interactionSource = interactionSource,
indication = if (showIndication == true) LocalIndication.current else null
indication = if (showIndication == true) LocalIndication.current else null,
onClick = { onClick?.invoke() },
onLongClick = onLongPress
)
.padding(insideMargin),
content = content
Expand Down
Loading
Loading