Compose for Desktopを触ってみた

7419 ワード
Compose Kotlin Kotlin テキストリンク

やったこと

JetBrains社が出しているCompose for Desktop
KotlinでAndroid/デスクトップアプリ両方作れるという技術を学習してみた。
※実装に当たりAPIの仕様などは本家側の資料を翻訳しながら理解。
https://developer.android.com/jetpack/androidx/releases/compose-ui?hl=ja

コードの雰囲気
あれこれ色々やろうと思うとswingとかの知識があった方が良いのかも

main.kt
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のアノテーションを付けた関数で作成する

MainView.kt
// 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の方が強いです。。。ぐぎゃー