Compose 中 Tap and press

83 阅读2分钟

在 Jetpack Compose 中,Tap 和 Press 是用于响应用户触摸事件的常见手势。Tap 手势表示短暂的触摸屏幕操作,而 Press 手势表示长时间的触摸操作。Compose 提供了方便的函数和修饰符来处理这些手势,并让开发者能够轻松地为应用程序添加相应的交互功能。

Tap 手势

Tap 手势用于响应短暂的触摸操作,例如点击按钮、选择列表项等。Compose 提供了 Clickable 组件和 Modifier.clickable 修饰符来处理 Tap 手势。

以下是一个简单的示例代码,演示了如何在 Compose 中使用 Tap 手势:

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun TapGestureExample() {
    var tapped by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(if (tapped) Color.Green else Color.Red)
            .clickable {
                tapped = !tapped
            }
    )
}

@Preview
@Composable
fun TapGestureExamplePreview() {
    TapGestureExample()
}

在上述示例中,我们创建了一个正方形的 Box,并为其设置了一个点击行为。当用户点击这个 Box 时,它会在红色和绿色之间切换。

Press 手势

Press 手势用于响应长时间的触摸操作,例如长按按钮、拖拽元素等。Compose 提供了 Modifier.pressIndicatorGestureFilter 修饰符来处理 Press 手势。

以下是一个简单的示例代码,演示了如何在 Compose 中使用 Press 手势:

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun PressGestureExample() {
    var pressed by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(if (pressed) Color.Green else Color.Red)
            .pressIndicatorGestureFilter(
                onStart = { pressed = true },
                onStop = { pressed = false }
            )
    )
}

@Preview
@Composable
fun PressGestureExamplePreview() {
    PressGestureExample()
}

在上述示例中,我们创建了一个正方形的 Box,并为其设置了一个 Press 手势。当用户长按这个 Box 时,它会在红色和绿色之间切换。

通过使用 Tap 和 Press 手势,你可以为应用程序添加各种交互功能,例如按钮点击、列表项选择、拖拽等,从而提升用户体验。