原文： Compose Multiplatform application

作者：JetBrains

注意

Compose Multiplatform 中的 iOS 部分现在处于 Alpha 状况。今后可能会有不兼容的更改，到时或许需求手动进行搬迁。

你能够运用这个模板来开发一起支撑桌面、安卓和 iOS 的跨渠道运用。

跟着接下来的教程，你将学会怎么发动并运转你的第一个 Compose 跨渠道项目，最终结果将是一个运用 Kotlin 跨渠道 编写逻辑代码 和 运用 Compose 跨渠道作为 UI 结构的项目。

【译】快速开始 Compose 跨平台项目

装备环境

提醒

因为 Apple 公司的要求。 你需求一台装置了 macOS 体系的 Mac 电脑来编写并在模拟器或真机上运转 iOS 相关的代码。

为了让这个模板正常运转，你需求以下这些东西：

  • 一台装置了最新版别 macOS 体系的电脑
  • Xcode
  • Android Studio
  • Kotlin Multiplatform Mobile 插件
  • CocoaPods 依靠管理

查看环境

在开端之前，你需求先运用 KDoctor 东西保证你的开发环境现已建立无误：

  1. 运用 Homebrew 装置 KDoctor：

    brew install kdoctor

  2. 在终端中运转 KDoctor :

    kdoctor

    假如一切环境都建立无误的话，你会看到下面这样的输出内容：

    Environment diagnose (to see all details, use -v option):
[✓] Operation System
[✓] Java
[✓] Android Studio
[✓] Xcode
[✓] Cocoapods
Conclusion:
  ✓ Your system is ready for Kotlin Multiplatform Mobile development!

否则，KDoctor 将会以高亮显现现在依然需求承认的环境装备，而且会给出一个修复主张。

查看项目结构

在 Android Studio 中翻开项目，然后将视图从 Android 切换到 Project 就能够看到这个项目的一切文件和方针渠道模块：

【译】快速开始 Compose 跨平台项目

Compose Multiplatform 项目包括四个模块:

shared

这是一个 Kotlin 模块，包括了 桌面、Android 和 iOS 运用程序的通用逻辑代码，一起也是在各个渠道中运用的同享代码。

shared 模块也是你编写 Compose 跨渠道代码的当地。 在 shared/src/commonMain/kotlin/App.kt 文件中，你能够找到该项目程序的同享 @Composable 根函数。

该项目运用 Gradle 作为编译（builds）体系。你能够在 shared/build.gradle.kts 文件中增加依靠和更改设置。 shared 模块将会被编译为 Java 库（library），Android 库，以及 iOS 结构（framework）。

desktopApp

这是一个 kotlin 模块，它会被编译为桌面运用。它运用 Gradle 作为编译体系。 desktopApp 模块依靠而且将 shared 模块看作一个一般（regular）库来运用。

androidApp

这是一个 kotlin 模块，它会被编译为安卓运用。它运用 Gradle 作为编译体系。androidApp 模块依靠而且将 shared 模块看作一个一般安卓库来运用。

iosApp

这是一个 Xcode 项目，它会被编译成 iOS 程序。 它依靠而且将 shared 模块看作一个 CocoaPods 依靠来运用。

运转程序

桌面端

为了运转桌面端程序，你需求在 运转装备（run configurations）列表挑选 desktopApp 然后点击 Run：

【译】快速开始 Compose 跨平台项目

【译】快速开始 Compose 跨平台项目

你当然也能够在终端中执行 Gradle 任务：

  • ./gradlew run 用于运转程序
  • ./gradlew package 用于打包本地二进制程序至 build/compose/binaries

安卓端

为了在 Android 模拟器中运转程序，你需求：

  1. 保证你有一个可用的安卓虚拟机（模拟器）， 否则， 创立一个。
  2. 在运转装备（run configurations）列表中，挑选 androidApp 。
  3. 挑选你的虚拟设备（模拟器），然后点击 Run：

【译】快速开始 Compose 跨平台项目

【译】快速开始 Compose 跨平台项目

或许，也能够运用 Gradle

要在安卓真机或许模拟器上装置安卓程序，你能够在终端中运转 ./gradlew installDebug 。

iOS 端

在模拟器上运转

要在 Android Studio 中发动 iOS 模拟器并运转程序，你需求修正 iosApp 的装备：

  1. 在运转装备（run configurations）列表中，挑选 Edit Configurations：

【译】快速开始 Compose 跨平台项目

  1. 转至 iOS Application | iosApp.

  2. 在 Execution target 列表, 挑选你的方针设备，点击 OK：

【译】快速开始 Compose 跨平台项目

  1. 现在 iosApp 的运转装备就现已可用了。 点击模拟器称号周围的 Run ：

【译】快速开始 Compose 跨平台项目

在 iOS 真机上运转

你能够免费在你的 iOS 真机设备上运转你的 Compose 跨渠道项目。为此，你需求以下这些东西：

  • 与您 Apple ID 关联的 TEAM_ID
  • 在 Xcode 中已注册的 iOS 设备

注意

在您继续之前，咱们主张您先运用 Xcode 创立一个简略的 “Hello, world!” 项目并保证能够在您的设备中成功运转。

你能够依照以下说明操作或许观看 Stanford CS193P lecture recording 学习怎么做。

怎么在 Xcode 中创立一个简略的项目
  1. 在 Xcode 的欢迎页面，挑选 Create a new project in Xcode。
  2. 在 iOS 页面中, 挑选 App 模板。 然后点击 Next。
  3. 填写产品名（product name）并坚持其他设置为默许。然后点击 Next。
  4. 挑选将项目贮存在哪儿后点击 Create。你将会看到一个在设备屏幕上展现 “Hello, world!” 的 app。
  5. 在 Xcode 屏幕的顶部，点击设备姓名周围的 Run 按钮。
  6. 将你的设备插入电脑。你将看到这个设备出现在运转选项列表中。
  7. 挑选你的设备然后点击 Run。
查找您的 Team ID

在终端中，运转 kdoctor --team-ids 能够查找您的 Team ID， KDoctor 将会列出当时体系中装备的一切可用 Team ID，比如：

3ABC246XYZ (Max Sample)
ZABCW6SXYZ (SampleTech Inc.)
另一种查找 Team ID 的方法

假如 KDoctor 对于你来说不好使，试试另一种方法：

  1. 在 Android Studio 中， 运用挑选的真机运转 iosApp ，此刻应该会编译失利。
  2. 翻开 Xcode 并挑选 Open a project or file.
  3. 找到你项目的 iosApp/iosApp.xcworkspace 文件。
  4. 在左边菜单中，挑选 iosApp。
  5. 找到 Signing & Capabilities。
  6. 在 Team 列表，挑选你的 team。

假如你尚未设置 team，运用 Add account 选项并跟着下面的过程做。

要运转程序，需求设置 TEAM_ID：

  1. 在模板中，找到 iosApp/Configuration/Config.xcconfig 文件。
  2. 设置 TEAM_ID.
  3. 在 Android Studio 重新翻开项目。此刻 iosApp 的装备中应该会显现已注册的设备。

测验你的第一次修正

现在咱们来改一下代码，然后看看是不是 Android 和 iOS 程序都一起发生了改动：

  1. 在 Android Studio 中，找到 shared/src/commonMain/kotlin/App.kt 文件。 这是 Compose 跨渠道 app 的通用入口。

    在这里面，你能够看到担任渲染 “Hello, World!” 按钮和 Compose 跨渠道的logo以及动画的代码：

    @OptIn(ExperimentalResourceApi::class)
@Composable
internal fun App() {
    MaterialTheme {
        var greetingText by remember { mutableStateOf("Hello, World!") }
        var showImage by remember { mutableStateOf(false) }
        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
            Button(onClick = {
                greetingText = "Hello, ${getPlatformName()}"
                showImage = !showImage
            }) {
                Text(greetingText)
            }
            AnimatedVisibility(showImage) {
                Image(
                    painterResource("compose-multiplatform.xml"),
                    null
                )
            }
        }
    }
}

  2. 接下来更新同享代码，在其间增加一个用于更新当时按钮文本的输入框：

    @OptIn(ExperimentalResourceApi::class)
@Composable
internal fun App() {
    MaterialTheme {
        var greetingText by remember { mutableStateOf("Hello, World!") }
        var showImage by remember { mutableStateOf(false) }
        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
            Button(onClick = {
                greetingText = "Hello, ${getPlatformName()}"
                showImage = !showImage
            }) {
                Text(greetingText)
            }
+           TextField(greetingText, onValueChange = { greetingText = it })
            AnimatedVisibility(showImage) {
                Image(
                    painterResource("compose-multiplatform.xml"),
                    null
                )
            }
        }
    }
}

  3. 重新运转 desktopApp 、 androidApp 和 iosApp 选项，你将看到变化现已一起反映到了三个 app 中：

【译】快速开始 Compose 跨平台项目

怎么装备 iOS 程序

要更好地理解此模板的设置并了解怎么在不运用 Xcode 的情况下装备 iOS 运用程序的基本属性，你能够在 Android Studio 中翻开 iosApp/Configuration/Config.xcconfig 文件。该装备文件包括：

  • APP_NAME， 方针可执行文件以及运用程序包名。
  • BUNDLE_ID 该程序在整个体系中的仅有标识.
  • TEAM_ID， Apple 生成并分配给您的团队的仅有标识.

要更改 APP_NAME 选项，请在运用 Android Studio 翻开项目之前 在任意文本编辑器中翻开 Config.xcconfig 文件，并将其更改为所需的称号。

假如需求在现已运用 Android Studio 中翻开过的项目中更改这个选项，你需求依照以下过程进行：

  1. 在 Android Studio 中关闭这个项目。
  2. 在终端中运转 ./cleanup.sh 。
  3. 更改你需求更改的装备参数。
  4. 运用 Android Studio 重新翻开这个项目。

假如要装备其他高档参数，你需求运用 Xcode。 在运用 Android Studio 翻开项目之后，在 Xcode 中翻开 iosApp/iosApp.xcworkspace 然后在其间编辑装备即可。

下一步

咱们鼓励你进一步探究 Compose 跨渠道项目，并测验更多项目：

  • Create an application targeting iOS and Android with Compose Multiplatform
  • Create an application targeting Windows, macOS, and Linux with Compose Multiplatform for Desktop
  • Complete more Compose Multiplatform tutorials
  • Explore some more advanced Compose Multiplatform example projects