Compose Multiplatform で キーボードショートカットを実装する

kyamada,•KotlinComposeMultiplatform
Back

概要

Compose Multiplatform で、キーボードショートカット処理を実装する方法を解説します。

仕様

実装

commonMain/../ui/screens/MainScreen.kt
val focusRequester = remember { FocusRequester() }
LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}
    
Box(modifier = Modifier
    .onKeyEvent {
        if (it.type == KeyEventType.KeyUp) return@onKeyEvent true
        when (it.key) {
            Key.DirectionLeft -> {
                println("Left")
            }
            Key.DirectionRight -> {
                println("Right")
            }
        }
        true
    }
    .focusRequester(focusRequester)
    .focusable()
) {
    ...
}

このままだと、Mac (Designed for iPad) アプリでキー入力した時に音がなってしまうので、音を消すために SwiftUIの onKeyPress を追加します。 onKeyPressは iOS 17.0 以降で使用できます。

iosApp/iosApp/iOSApp.swift
 
@main
struct iOSApp: App {
	var body: some Scene {
		WindowGroup {
			RootView()
                .onKeyPress(.leftArrow) {
                    // キー押下時に音を消すため
                    return .handled
                }
                .onKeyPress(.rightArrow) {
                    return .handled
                }
		}
	}
}
© 品川アプリ.RSS