脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Jetpack Compose click

Jetpack Compose实现点击事件click的多种方法

 更新时间：2024年02月11日 12:00:19   作者：fundroid  
这篇文章主要介绍了Jetpack Compose实现点击事件的多种方法,Jetpack Compose是一款基于Kotlin的声明式UI工具包,可以方便地创建漂亮的用户界面,下面我们就来看看Jetpack Compose添加点击事件都可以怎么实现

Compose中添加click有多种方法，本文做一个简单总结

Modifier.clickable

这是最常见也是最简单的方式，如下所示

Box(
    modifier = Modifier.clickable {
        // 处理点击事件
    }
)

当点击发生时，除了可以相应事假处理，也会触发水波纹（Ripple）等主题效果。

需要注意，对于 Button 类的 Composable ，不推荐使用 Modifier.clickable，应该使用其自带的 onClick 参数，虽然其内部在调用 Modifier.clickable 之外还有一些额外处理

Button (
	onClick = {
	 	// 处理点击事件
	}) {
	//...
}

Modifier.combinedClickable

在单击事件之外，同时可以处理双击，长按等点击事件

Box(
    modifier = Modifier
        .combinedClickable(
            onClick = {
                // 单击
            },
            onDoubleClick = {
                // 双击
            },
            onLongClick = {
                // 长按
            }
        )
)

与 Modifier.clickable 一样， 点击会触发水波纹效果。

Modifier.pointerInput

pointerInput 是 Compose 中处理所有手势事件的入口，类似传统视图的 onTouch 。在这里可以识别 click 手势，而且相应优先级高于 clickable，但是不会触发水波纹之类的效果

Box(
    modifier = Modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onDoubleTap = {
                },
                onLongPress = {
                },
                onPress = {
                },
                onTap = {
                }
            )
        },
)

如上，detectTapGestures 内可以处理点击各种事件。类似的还有 detectDragGestures 可以处理拖动事件。

detectTapGestures 中除了相应事件，还能通过 offset 获知当前点击位置，如下：

detectTapGestures(
    onTap = {
        val x = it.x
        val y = it.y
    },
)

此外，当发生 onPress 事件时，还可以获取手指离开时的回调

var pressing by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onPress = {
                    // 按下
                    pressing = true
                    val isCanceled = tryAwaitRelease()
                    // 离开
                    pressing = false
                },
            )
        },
)

OnPress 期间，调用 tryAwaitRelease 会挂起当前函数，当手指离开时，继续执行。

tryAwaitRelease 返回一个 bool 值：true 表示手指在当前区域内抬起，false 表示手指移出了当前区域。类似于传统视图的 UP 和 CANCEL 事件。

可见，pointerInput 对事件可以更精细的管理。

ViewConfiguration

如果想对事件进一步精细化控制，比如设置点击最小间隔、长按超时等，可以使用 ViewConfiguration 进行配置，目前可以设置的项目如下：

可见，ViewConfiguration 的配置主要影响 combinedClickable 和 pointerInput。

通过 LocalViewConfiguration 可以获得全局默认的 ViewConfiguration。我们可以通过继承和重写的方式，在默认配置基础上实现自定义的 ViewConfiguration 。然后同样借助 CompositionLocal 实现其内部局部 UI 的自定义配置。

下面的例子展示如何自定义长按超时时间：

// 自定义 ViewConfiguration
class CustomViewConfiguration(
    private val defaultViewConfiguration: ViewConfiguration //传入默认配置
) : ViewConfiguration by defaultViewConfiguration {
    // 自定义长按超时3000ms
    override val longPressTimeoutMillis: Long = 3000
}
@Composable
fun Sample() {
    // 获取全局默认 ViewConfiguration
    val defaultViewConfiguration = LocalViewConfiguration.current
	// 基于默认配置创建自定义 CustomViewConfiguration
    val viewConfiguration = remember {
        CustomViewConfiguration(defaultViewConfiguration)
    }
    CompositionLocalProvider(
        LocalViewConfiguration provides viewConfiguration
    ) {
        // 内部的事件配置都受到 CustomViewConfiguration 影响
        Box(
            modifier = Modifier
                .combinedClickable(
                    onLongClick = {
                        // ...
                    },
                )
        )
    }
}

值得一提的是 ViewConfiguration.minimumTouchTargetSize 用来设置手势可响应区域的最小尺寸。这个挺实用，可以解决界面上一些小尺寸控件比艰难点触的问题。 因此，通过设置，有可能 Composable 中 pointerInput 可以相应事件的区域大于其实际渲染的区域。此时取得的 offset 值可能是负数，亦可能超过 Compose 的 size。

minimumTouchTargetSize 默认值是 48.dp，所以如果我们开发中获取了负数 offset 值也不惊奇。

class CustomViewConfiguration(
    private val defaultViewConfiguration: ViewConfiguration
) : ViewConfiguration by defaultViewConfiguration {
    override val minimumTouchTargetSize: DpSize = DpSize(0.dp, 0.dp)
}

可以做个实验，如果将其设置为 0.dp，则永远不会获得负数的 offset 。当然我们不推荐这么做，会造成难点触的情况出现。

到此这篇关于Jetpack Compose实现点击事件click的多种方法的文章就介绍到这了,更多相关Jetpack Compose click内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论