まずはComposeの前提となる知識を記載します
目次
パッケージ
ComposeはJetpackライブラリ内でandroidx.composeというパッケージでバンドルされている
Composeモジュールについて
Compose Runtime
アノテーションや状態の更新を検出するAPIなどの仕組みを提供
Compose UI
テキストやグラフィックスの描画、タッチイベントの検出などUIを構成するために必要な仕組みを提供
Compose Foundation
UIコンポーネントを提供するモジュール。プレーンなコンポーネントのみを提供
Compose Material3
Googleが提唱するマテリアルデザインに準拠したコンポーネントを提供する
Compose Compiler
Composeの記述したコードをコンパイルするKotlinコンパイラプラグイン。Composeのコードを理解して実行時にUI描画に必要なコードを生成する
Composeのインポートについて
@Composable自体はJetpack ComposeとCompose Multiplatformで同一のものを利用するため個別にアノテーションが用意されているわけではない。
AndroidでPreviewについて
例えばandroidx.compose.meterial3.*やandroidx.compose.ui.tooling.preview.PreviewなどはAndroid専用で利用できるモジュールのためcommonMainディレクトリ内で参照することができない。
そのため、作成したComposable関数をプレビューで確認したい場合はAndroid側のモジュール内でPreviewアノテーションを利用して確認する
iOSのPreviewについて
CMPのiosMainで開発したものはAndroidの用にPreviewで確認することはできないため実機 or Simulatorでビルドする必要がある。プラグインを入れている場合はRun ConfigurationでiosAppを選択すればビルドすることが可能(実際にはXcodeが呼び出されて実行されている)
またはXcodeアプリからビルドしたい場合は./gradlew assembleXCFrameworkなどを実行して組み込んだ上でビルドする必要がある。
Android StudioなどからiosAppを直接ビルドするときは内部ではassembleXCFrameworkは実行されておらずKotlin/Nativeが直接iOSバイナリようにビルドされています
また、どちらを利用する場合でもComposableをiOSで確認するには必ずComposeUIViewControllerクラスを利用してコンポーザブルを表示させる必要があります。SwiftUIでいうところのUIKitでSwiftUIを利用するためにUIHostingControllerを利用するイメージです。