1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Compose for Desktopを触ってみた

Posted at

#やったこと
image.png

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
image.png

公式にあったCodeViewerアプリを写経した結果の物、
Andorid側の実装はいらないなと思ったのでマルチプラットフォームではない形で実装しています。

デスクトップアプリはほぼやったことがなかったのですが、
これはかなり設計が丁寧にできていると感じました。

何かメモ帳アプリもできました。
MemoApp

本来は前述のCodeViewerをエディターに改造しようかと思ったのですが失敗
というわけでメモ帳から始めてみようと思って作ったアプリ

#余談
Flutter2.0が出ましたね。
正直Flutterの方が強いです。。。ぐぎゃー

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?