Compose にクリックを追加する方法はたくさんあります。この記事では簡単にまとめます。
1.モディファイア.クリッカブル
以下に示すように、これが最も一般的で簡単な方法です。
Box(
modifier = Modifier.clickable {
// 处理点击事件
}
)
クリックが発生すると、対応するイベント処理に加えて、水の波紋(Ripple)などのテーマ効果もトリガーされます。
Button クラスの Composable の場合、Modifier.clickable の使用は推奨されず、独自の onClick パラメーターを使用する必要があります。ただし、内部には Modifier.clickable の呼び出し以外に追加の処理がいくつかあります。
Button (
onClick = {
// 处理点击事件
}) {
//...
}
2. Modifier.combinedClickable
クリックイベントに加えて、ダブルクリック、長押しなどのクリックイベントを同時に処理できます。
Box(
modifier = Modifier
.combinedClickable(
onClick = {
// 单击
},
onDoubleClick = {
// 双击
},
onLongClick = {
// 长按
}
)
)
Modifier.clickable と同様に、クリックすると水の波紋エフェクトがトリガーされます。
3. Modifier.pointerInput
pointerInput は、従来のビューの onTouch と同様に、Compose ですべてのジェスチャ イベントを処理するためのエントリ ポイントです。ここではクリック ジェスチャを認識でき、対応する優先度はクリック可能よりも高くなりますが、水の波紋などのエフェクトはトリガーされません
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 はブール値を返します。true は指が現在の領域内で持ち上げられたことを意味し、false は指が現在の領域の外に移動したことを意味します。従来のビューの UP および CANCEL イベントに似ています。
pointerInput の方がより細かくイベントを管理できることがわかります。
4.構成の表示
最小クリック間隔や長押しタイムアウトの設定など、イベントの制御をさらに細かく設定したい場合は、ViewConfigurationを使用して設定することができます。現在、設定できる項目は以下の通りです
。 ViewConfiguration の構成は主に、combinedClickable と pointerInput に影響します。
グローバルなデフォルトの ViewConfiguration は、 によってLocalViewConfiguration取得できます。継承と書き換えにより、デフォルト構成に基づいてカスタム 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ジェスチャ応答領域の最小サイズを設定するために使用されることに注意してください。これは非常に実用的で、インターフェイス上の一部の小さなサイズのコントロールがタッチしにくいという問題を解決できます。そのため、設定により、イベントに応答pointerInputできる。このとき取得されるオフセット値は負の数になる場合や、Compose のサイズを超える場合があります。
minimumTouchTargetSize のデフォルト値は 48.dp であるため、開発中に負のオフセット値が得られても不思議ではありません。
class CustomViewConfiguration(
private val defaultViewConfiguration: ViewConfiguration
) : ViewConfiguration by defaultViewConfiguration {
override val minimumTouchTargetSize: DpSize = DpSize(0.dp, 0.dp)
}
実験として、0.dp に設定すると、負のオフセットは得られません。もちろん、タッチが難しくなるため、これはお勧めしません。