防快速点击,优雅的操作 Modifier
2023-09-20 00:30:56
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 组件时,它只会触发一次点击事件,从而防止了快速点击的问题。