JetBrains社が出しているCompose for Desktop
KotlinでAndroid/デスクトップアプリ両方作れるという技術を学習してみた。
※実装に当たりAPIの仕様などは本家側の資料を翻訳しながら理解。
https://developer.android.com/jetpack/androidx/releases/compose-ui?hl=ja
コードの雰囲気
あれこれ色々やろうと思うとswingとかの知識があった方が良いのかも
package code.viewer
import androidx.compose.desktop.Window
import androidx.compose.ui.unit.IntSize
import code.viewer.ui.MainView
import java.awt.image.BufferedImage
import javax.imageio.ImageIO
import javax.swing.SwingUtilities.invokeLater
// 起点になるポイント
fun main() {
//イベントディスパッチスレッド以外のスレッドからGUIの描画処理を行う場合
//javax.swing:invokeLater() メソッドを使用
invokeLater {
// 指定されたコンテンツでウィンドウを開きます。
Window(
title = "Clone Code Viewer",
size = IntSize(1280, 768),
icon = loadImageResource("ic_launcher.png")
) {
MainView()
}
}
}
private fun loadImageResource(path: String): BufferedImage {
val resource = Thread.currentThread().contextClassLoader.getResource(path)
requireNotNull(resource) { "Resource $path not found" }
return resource.openStream().use(ImageIO::read)
}
画面コンポーネントは@Composableのアノテーションを付けた関数で作成する
// UIコンポーネントはfun形式で返却値はUnit
// @Composableのアノテーションが必ず必要
@Composable
fun MainView() {
// remember:状態管理を行うための関数、
// 内部の値は初回の表示時に保存され再描画の際も返される
val codeViewer = remember {
val editors = Editors()
CodeViewer(
editors = editors,
fileTree = FileTree(HomeFolder, editors),
settings = Settings()
)
}
// テキスト選択無効
DisableSelection {
MaterialTheme(
colors = AppTheme.colors.material
) {
PlatformTheme {
/**
* Surface:マテリアルデザインの中心的なコンポーネント
* content: @Composable()の内容をマテリアルデザインのルールにのっとって描画する役割を持つ
*/
Surface {
CodeViewerView(codeViewer)
}
}
}
}
}
#そんなこんなで出来た成果物
CloneCodeViewer
公式にあったCodeViewerアプリを写経した結果の物、
Andorid側の実装はいらないなと思ったのでマルチプラットフォームではない形で実装しています。
デスクトップアプリはほぼやったことがなかったのですが、
これはかなり設計が丁寧にできていると感じました。
何かメモ帳アプリもできました。
MemoApp
本来は前述のCodeViewerをエディターに改造しようかと思ったのですが失敗
というわけでメモ帳から始めてみようと思って作ったアプリ
#余談
Flutter2.0が出ましたね。
正直Flutterの方が強いです。。。ぐぎゃー