Compose for DesktopのMouse_Eventsのチュートリアルをやってみた。
環境
- Compose for Desktop 1.0.0-alpha3
参考
Clickイベント
クリック・ダブルクリック・ロングクリックを取得できる。
fun main() = singleWindowApplication {
@OptIn(ExperimentalFoundationApi::class)
Box(
modifier = Modifier
.background(Color.Magenta)
.fillMaxWidth(0.5f)
.fillMaxHeight(0.5f)
.combinedClickable(
onClick = { println("onClick") },
onDoubleClick = { println("onDoubleClick") },
onLongClick = { println("onLongClick") },
)
)
}
moveイベント
マウスカーソルの移動が移動したイベントを取得できる。
fun main() = singleWindowApplication {
Box(
modifier = Modifier
.background(Color.Magenta)
.fillMaxWidth(0.5f)
.fillMaxHeight(0.5f)
.pointerMoveFilter(
onMove = {
println("x:${it.x} y:${it.y}")
false
}
)
)
}
enterイベント
マウスカーソルがコンポーネントの領域に入った/出たときのイベントを取得できる。
fun main() = singleWindowApplication {
Box(
modifier = Modifier
.background(Color.Magenta)
.fillMaxWidth(0.5f)
.fillMaxHeight(0.5f)
.pointerMoveFilter(
onEnter = {
println("Enter")
false
},
onExit = {
println("Exit")
false
}
)
)
}
右クリック・中クリックと修飾キー
押されたマウスのボタンと修飾キーを取得できる。
イベントに関する詳細情報が必要な場合は、PointerEventのmouseEventプロパティに利用可能な生のAWTマウスイベントオブジェクトがある。
@OptIn(ExperimentalDesktopApi::class)
fun main() = singleWindowApplication {
var clickableText by remember { mutableStateOf("Click me!") }
Column {
Box(
modifier = Modifier
.background(Color.Magenta)
.fillMaxWidth(0.5f)
.fillMaxHeight(0.5f)
.mouseClickable(
onClick = {
clickableText = buildString {
append("Buttons pressed:\n")
append("primary: ${buttons.isPrimaryPressed}\t")
append("secondary: ${buttons.isSecondaryPressed}\t")
append("tertiary: ${buttons.isTertiaryPressed}\t")
append("\n\nKeyboard modifiers pressed:\n")
append("alt: ${keyboardModifiers.isAltPressed}\t")
append("ctrl: ${keyboardModifiers.isCtrlPressed}\t")
append("meta: ${keyboardModifiers.isMetaPressed}\t")
append("shift: ${keyboardModifiers.isShiftPressed}\t")
}
}
)
)
Text(
text = clickableText
)
}
}