返回

防快速点击,优雅的操作 Modifier

Android

CompositionLocalProvider(LocalOverScrollConfiguration provides OverScrollConfiguration.None) {
Column(
modifier = Modifier
.verticalScroll(state)
.pointerInput(Unit) {
detectTapGestures(
onTap = {
Log.d("ComposeApp", "onTap: $it")
},
onDoubleTap = {
Log.d("ComposeApp", "onDoubleTap: $it")
},
onLongPress = {
Log.d("ComposeApp", "onLongPress: $it")
},
onPress = {
Log.d("ComposeApp", "onPress: $it")
},
onDown = {
Log.d("ComposeApp", "onDown: $it")
true
}
)
}
) {
(0 until 100).forEach {
Text(
text = "$it",
modifier = Modifier
.clickable(
enabled = !(Modifier.pointerInput(Unit) {
detectTapGestures(
onTap = {
Log.d("ComposeApp", "onTap: $it")
false
}
)
}).value),
onClick = {
Log.d("ComposeApp", "onClick: $it")
}
)
.padding(16.dp)
.background(MaterialTheme.colors.primary.copy(alpha = 0.1f))
)
}
}
}

我们创建了一个 Column 作为容器,使用 verticalScroll 修饰符来添加垂直滚动功能。然后,我们将 pointerInput 修饰符应用于 Column,它允许我们检测用户的手势。

detectTapGestures(
    onTap = {
        Log.d("ComposeApp", "onTap: $it")
    },
    onDoubleTap = {
        Log.d("ComposeApp", "onDoubleTap: $it")
    },
    onLongPress = {
        Log.d("ComposeApp", "onLongPress: $it")
    },
    onPress = {
        Log.d("ComposeApp", "onPress: $it")
    },
    onDown = {
        Log.d("ComposeApp", "onDown: $it")
        true
    }
)

detectTapGestures() 函数用于检测用户的手势,包括点击、双击、长按、按下等。当用户执行这些手势时,相应的回调函数就会被触发。

(0 until 100).forEach {
    Text(
        text = "$it",
        modifier = Modifier
            .clickable(
                enabled = !(Modifier.pointerInput(Unit) {
                    detectTapGestures(
                        onTap = {
                            Log.d("ComposeApp", "onTap: $it")
                            false
                        }
                    )
                }).value),
                onClick = {
                    Log.d("ComposeApp", "onClick: $it")
                }
            )
            .padding(16.dp)
            .background(MaterialTheme.colors.primary.copy(alpha = 0.1f))
    )
}

然后,我们在 Column 中添加了一个 forEach 循环,它会创建 100 个 Text 组件。每个 Text 组件都使用 clickable 修饰符来添加点击功能。enabled 参数用于控制 Text 组件是否可以被点击。

enabled = !(Modifier.pointerInput(Unit) {
    detectTapGestures(
        onTap = {
            Log.d("ComposeApp", "onTap: $it")
            false
        }
    )
}).value

我们使用 Modifier.pointerInput() 来创建一个新的修饰符,并在其中使用 detectTapGestures() 函数来检测用户的点击手势。当用户点击 Text 组件时,onTap 回调函数会被触发,并将返回一个 false 值。这将导致 enabled 参数为 false,从而禁用 Text 组件的点击功能。

这样,当用户连续点击 Text 组件时,它只会触发一次点击事件,从而防止了快速点击的问题。