📘

FleetでCompose Muitlplatformのプレビューを表示する

2024/03/17に公開

Kotlin

既存のコードでプレビューを表示するには

Compose Multiplatformのバージョンを1.6以上にする
依存関係を追加する

libs.versions.toml

[versions]
compose = "1.6.0"

[libraries]
+ compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }

shared/build.gradle.kts

    sourceSets {
        commonMain.dependencies {
            implementation(compose.runtime)
            implementation(compose.foundation)
            implementation(compose.material)
            implementation(compose.ui)
            implementation(compose.components.resources)
+           implementation(compose.components.uiToolingPreview)
        }

プレビューを表示したい箇所にアノテーションを追加する

App.kt

+ import org.jetbrains.compose.ui.tooling.preview.Preview

@Composable
+ @Preview
fun App() {

プレビューの画面ってどこから出せるの？

関数名の左側に出ているアイコンをクリックすれば出てくる。

エラーが出る場合

今回試した際の環境は以下の通り。

Fleet version: build 1.31.107
OS: Mac OS X (14.4, aarch64)
JDK version used: Temurin-17.0.8+7 via asdf

動作確認の際、以下のエラーが発生した。

Detailsを押すとエラーメッセージが表示される。

The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

メッセージはいわゆる「JDKが見つからない」的なやつ。
自分の環境ではJDKはasdfでインストールしているので、インストールされていないわけではない。

まずはFleetの設定でJDKがどうなっているかを確認。 Fleet > Preferences から設定画面を開く。
ここはきちんと認識されていた。

次に、実はターミナルでJAVA_HOMEが設定されていないのでは？ということで確認してみる。結果、特に問題なかった。
（そういえば以前、 asdf-javaのREADMEを参照して設定したんだった）

% echo $JAVA_HOME
/Users/xxx/.asdf/installs/java/temurin-17.0.8+7

よく分からないので、Fleetをターミナルから起動してみる（ターミナルの環境変数が引き継がれるかなと）。

% open ~/Applications/Fleet.app

結果、何事もなく表示された。

やり方が合っているか自信ないけど、Issue Trackerにも起票した。　　

既存のコードでプレビューを表示するには

プレビューの画面ってどこから出せるの？

エラーが出る場合

Discussion