Compose Multiplatform 官方示例应用全解析从 Imageviewer 到 Compose HTML 的多平台实战指南【免费下载链接】compose-multiplatformCompose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.项目地址: https://gitcode.com/GitHub_Trending/co/compose-multiplatform本文以当前仓库 examples/README.md 为核心指南系统梳理 Compose Multiplatform 官方提供的一组可运行示例应用——涵盖图片查看、代码浏览、即时聊天、2D 图形、导航、网络请求以及纯 HTML 网页等多个典型场景覆盖 Android、iOS、Desktop桌面与 Web浏览器四大目标平台。读完本文你将掌握每个示例的功能定位、源码组织结构以及在各平台上的运行、打包与调试方法可直接将这些命令与工程结构复用到自己的 Compose Multiplatform 项目中。示例总览一套代码多端运行examples/README.md是整组示例的索引文档其核心是一张示例清单表明确了每个示例的名称、功能描述与支持的平台。完整继承如下示例描述支持平台Imageviewer图片查看器应用含相机与地图支持Android、iOS、DesktopCodeviewer文件浏览器与代码查看器应用Android、iOS、DesktopChat一个简单的聊天应用Android、iOS、DesktopGraphics2D2D 游戏与图形示例Android、iOS、DesktopNav Cupcake演示 Compose Navigation 用法的多屏应用Android、iOS、DesktopIssues tracker具有自适应 UI 与 ktor-client 的 GitHub 问题跟踪器Android、DesktopHTML based samples使用 Compose HTML Library 编写的示例浏览器Web从这张表可以看出 Compose Multiplatform 的核心价值UI 代码在 commonMain 中共享同一套 Compose 声明式 UI 可以编译到 JVM桌面、Android、iOSKotlin/Native以及 Web/Wasm 目标。其中 Issues tracker 仅面向 Android 与 Desktop而 HTML 系列示例则完全面向浏览器场景体现了不同技术路线的取舍。通用准备开发环境与工程结构所有示例在运行前都要求先配置好 Compose Multiplatform 开发环境。仓库内各示例如 imageviewer、codeviewer、chat、graphics-2d的 README 均提示请参考 JetBrains 官方 Kotlin Multiplatform 开发文档中关于 Compose Multiplatform 环境搭建的说明进行准备需安装对应版本的 JDK、Android SDK 与 Xcode 等。从目录结构看这些多平台示例遵循了高度一致的组织模式以 imageviewer 为例shared/共享代码模块内部按commonMain、androidMain、desktopMain、iosMain、jsMain等源码集组织imageviewer 的shared/src下包含约 90 个 Kotlin 文件androidApp/Android 宿主应用入口含AndroidManifest.xml与入口 ActivitydesktopApp/桌面JVM宿主应用入口iosApp/iOS 宿主工程Xcode 工程含ContentView.swift、iOSApp.swift等webApp/Web/Wasm 宿主入口gradle/libs.versions.toml集中管理 Compose、Kotlin 等依赖版本。Imageviewer图片画廊 相机 地图的综合示例Imageviewer 是功能最丰富的示例之一README 中描述为基于 Compose Multiplatform 的、带相机与地图支持的图片画廊示例可运行于桌面、Web、Android 与 iOS。除基本图片浏览外它还演示了 LazyGrid 图片列表、相机调用、Google Maps 地图展示等能力仓库中另配有独立的 mapview-desktop 模块包含约 21 个 Kotlin 文件专门演示桌面端地图视图。运行前的关键步骤如果在之前已经运行过该示例再次运行前需要先执行一次./gradlew podInstallpodInstall用于为 iOS 目标解析 CocoaPods 依赖如地图相关的原生库。执行后在 IDE 中选择对应目标的 Run Configuration 即可运行。下图展示了该示例在 IDE 中可用的三个运行配置桌面端运行与原生分发打包通过 Gradle 直接运行桌面应用./gradlew desktopApp:run构建当前操作系统对应的原生分发安装包./gradlew :desktop:packageDistributionForCurrentOS # 产物输出到 desktopApp/build/compose/binariespackageDistributionForCurrentOS会依据当前宿主机系统Windows/macOS/Linux生成对应的安装目录或安装包产物统一写入desktopApp/build/compose/binaries目录。Web/Wasm 端运行./gradlew :webApp:wasmJsRun该命令启动一个开发服务器在浏览器中运行 WebAssembly 版本的应用。需要说明的是README 明确标注Web 支持目前仍处于 Alpha 阶段API 可能随时调整适合在非生产场景下体验与反馈问题。Android 端Maps API Key 配置Android 目标因为集成了 Google Maps需要额外的密钥配置获取 Google Maps API Key在仓库根目录的local.properties文件不存在则创建中添加两行配置MAPS_API_KEYYOUR_KEY其中YOUR_KEY为上一步获取的密钥sdk.dirYOUR_SDK_PATH其中YOUR_SDK_PATH为本地 Android SDK 路径使用 IntelliJ IDEA 或 Android Studio 打开工程运行androidApp配置。这里local.properties是 Gradle Android 插件约定俗成的本机配置文件其中的sdk.dir也可以由 IDE 自动生成而MAPS_API_KEY则被示例的 Android 代码读取并注入到 Maps SDK 初始化流程中属于运行前的必配项。Codeviewer文件浏览器与代码查看器Codeviewer 是一个在 Desktop、Android、iOS 三端运行的代码查看应用其shared/src/commonMain下包含约 22 个 Kotlin 文件与 8 个 TTF 字体文件用于代码高亮与字体渲染展示了如何在共享代码中实现文件系统浏览、源码读取与语法高亮展示。运行方式与 Imageviewer 桌面端完全一致./gradlew desktopApp:run构建原生桌面分发./gradlew :desktop:packageDistributionForCurrentOS # 产物输出到 desktop/build/compose/binaries注意此示例的打包产物目录是desktop/build/compose/binaries相对 Imageviewer 少了App后缀实际以各示例settings.gradle.kts中声明的模块名称为准。在 Android Studio 中选择对应 Run Configuration 即可在 Android 设备/模拟器上运行。ChatSwiftUI 与 Compose 双向互操作示范Chat 表面上是一个简单聊天应用但其真正的技术重点是SwiftUI 与 Compose 的互操作。README 明确指出请特别注意 ComposeViewControllerToSwiftUI.swift 这个文件它负责把 Compose 嵌入 SwiftUI 视图层级。从该示例的 iosApp 目录含ComposeInsideSwiftUIScreen.swift、ComposeViewControllerToSwiftUI.swift、ContentView.swift、YetAnotherSwiftUIScreen.swift、KotlinToSwiftHelper.swift等文件可以看出它演示了两种互操作方向Compose 嵌入 SwiftUI通过ComposeViewControllerToSwiftUI.swift将 Compose 内容包装为 SwiftUI 可用的视图SwiftUI 嵌入 Compose通过KotlinToSwiftHelper.swift将 SwiftUI 视图反向暴露给 Kotlin/Compose 侧调用。运行方式Chat 支持 Android、iOS、桌面与浏览器四种运行环境。桌面端运行命令与其他示例相同./gradlew desktopApp:runmacOS 原生运行实验性基于 Kotlin/Native 直接可执行目标Intel 处理器./gradlew :shared:runDebugExecutableMacosX64Apple Silicon./gradlew :shared:runDebugExecutableMacosArm64这里runDebugExecutableMacosX64/runDebugExecutableMacosArm64是 Kotlin Multiplatform Gradle 插件为 macOS 可执行目标生成的运行任务按 CPU 架构二选一执行即可。这也印证了同一套共享 UI 代码既可打包为桌面 JVM 应用也可编译为 macOS 原生可执行程序。Graphics2D2D 游戏与图形渲染实验场Graphics2D 用于演示 Compose 在 2D 游戏与图形场景下的能力同样覆盖 Android、iOS、桌面与浏览器四个平台。其shared/src/commonMain包含约 14 个 Kotlin 文件与若干图片资源并且带有commonTest测试源码集是理解 Compose Canvas、绘制 API 与动画系统的一个入口。运行方式./gradlew desktopApp:runmacOS 原生实验性运行./gradlew runDebugExecutableMacosX64Intel 处理器./gradlew runDebugExecutableMacosArm64Arm 处理器与 Chat 相比此示例的任务名不带:shared:模块前缀说明它在根工程中直接暴露了 macOS 可执行任务两种写法本质都是调用 Kotlin/Native 可执行目标。Nav CupcakeCompose Navigation 多屏导航实战Nav Cupcake 是 Android 官方导航 CodelabNavigate between screens with Compose的 Compose Multiplatform 移植版。它演示了 Compose Navigation 的核心概念导航图NavGraph、路由Route、屏幕间传参、以及返回栈管理等并且把导航能力带到了 iOS 与桌面端——这是原生 Compose Navigation 在 JetBrains 多平台实现中的典型用法。该示例的shared/src下约 13 个 Kotlin 文件即导航相关代码images/目录提供了浅色与深色两种主题下的多平台运行截图multiplatform_screenshot_light.png与multiplatform_screenshot_dark.png直观展示了同一 UI 在 Android、iOS、桌面三端的表现一致性。运行方式与前述桌面示例一致./gradlew desktopApp:run也可通过androidApp、iosApp的 Run Configuration 分别在 Android 与 iOS 上运行。Issues tracker自适应 UI Ktor 网络请求Issues tracker 是一个 GitHub Issues 查看器技术栈上使用ktor-client 发起网络请求并采用**自适应 UIadaptive UI**在 Android 与桌面两个平台上呈现数据。其common/src包含约 6 个 Kotlin 文件、GraphQL 查询文件与 JSON 配置android/与desktop/则分别是两端的宿主入口。运行桌面应用./gradlew :desktop:run或在 IDE 中选择desktop配置直接运行。构建原生桌面分发包./gradlew :desktop:packageDistributionForCurrentOS # 产物输出到 desktop/build/compose/binaries该示例非常适合作为Compose Multiplatform 项目接入真实网络层的参考ktor-client 的请求逻辑写在共享模块中Android 与 Desktop 两端共用同一套数据获取与 UI 渲染代码同时利用自适应布局在不同屏幕尺寸上呈现不同的信息密度。HTML 系列纯浏览器场景的 Compose HTML LibraryHTML based samples 是另一组独立示例的索引全部基于 Compose HTML Library 编写面向浏览器场景共包含四个子示例子示例说明compose-bird一个关于小鸟的简单游戏Landing page使用 Compose 构建的着陆页Compose with React演示 compose-in-react 与 react-in-compose 双向集成Composable in JS使用基于 HTML 的 Composable其中with-react展示了 Compose 声明式 UI 与 React 生态共存的能力compose-in-js展示了在纯 JavaScript/HTML 环境中使用 Compose Composable 的路径。这组示例与多平台 UI 示例形成互补当目标仅是浏览器页面而非跨端应用时可以直接使用 Compose HTML 库。跨平台运行命令速查综合以上各示例 README将核心命令汇总如下可直接对照使用目标命令适用示例桌面运行JVM./gradlew desktopApp:runimageviewer、codeviewer、chat、graphics-2d、nav_cupcake桌面运行issues 模块名不同./gradlew :desktop:runissues桌面原生打包./gradlew :desktop:packageDistributionForCurrentOS全部桌面示例Web/Wasm 运行./gradlew :webApp:wasmJsRunimageviewermacOS 原生Intel./gradlew :shared:runDebugExecutableMacosX64chatmacOS 原生Arm./gradlew :shared:runDebugExecutableMacosArm64chatmacOS 原生根任务写法./gradlew runDebugExecutableMacosX64/Arm64graphics-2diOS 依赖准备./gradlew podInstallimageviewer 等含 CocoaPods 依赖的示例质量保障示例验证脚本除了各示例本身仓库还提供了一套 CI 级验证脚本用于保证示例始终可编译validateExamples.sh批量构建大部分示例chat、codeviewer、imageviewer、issues、graphics-2d逐一执行packageDistributionForCurrentOS验证其能否被成功编译打包。脚本要求传入两个参数例如./validateExamples.sh 1.1.1 1.6.10其中第一个是 Compose 版本第二个是 Kotlin 版本通过-Pcompose.version与-Pkotlin.version覆盖各示例的默认依赖版本——这也是示例必须能够用 dev 构建版本编译这一工程要求的落地方式validateExamplesAndroid.sh、validateExamplesIos.sh、validateExamplesWithJs.sh分别面向 Android、iOS 与 JS/Web 目标的验证脚本。这意味着你在 README 中看到的每一条运行命令都经过了仓库 CI 脚本的持续编译验证可以放心作为自己项目中的命令参考。结语examples/README.md所串联的这组示例构成了 Compose Multiplatform 最完整的官方实战图谱从覆盖四端的图片查看器到 SwiftUI 互操作的聊天应用再到导航、网络与纯 HTML 场景每一份子 README 都给出了可直接执行的 Gradle 命令。你可以将这些示例视为可运行的官方文档——遇到多平台 UI 共享、平台互操作、原生打包或 Wasm 部署等问题时直接对照对应示例的工程结构与命令即可快速找到标准答案。【免费下载链接】compose-multiplatformCompose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.项目地址: https://gitcode.com/GitHub_Trending/co/compose-multiplatform创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考