更新使用者介面

本教學使用 IntelliJ IDEA，但您也可以在 Android Studio 中進行 —— 這兩款 IDE 分享相同的核心功能與 Kotlin Multiplatform 支援。

這是使用共用邏輯與原生 UI 建立 Kotlin Multiplatform 應用程式教學的第二部分。在繼續之前，請確保您已完成先前的步驟。

建立您的 Kotlin Multiplatform 應用程式

This tutorial uses IntelliJ IDEA, but you can also follow it in Android Studio – both IDEs share the same core functionality and Kotlin Multiplatform support. This is the first part of the Create a Kotlin Multiplatform app with shared logic and native UI tutorial. Create your Kotlin Multiplatform app Update the user interface Add dependencies Share more logic Wrap up your project

更新使用者介面
新增相依性

共用更多邏輯
完結您的專案

為了建置使用者介面，您將在專案的 Android 部分使用 Compose Multiplatform 工具組，並在 iOS 部分使用 SwiftUI。 這兩者都是宣告式 UI 架構，您會看到 UI 實作上的相似之處。在這兩種情況下，您都會將資料儲存在 phrases 變數中，隨後對其進行反覆運算以產生 Text 項目列表。

更新 Android 部分

androidApp 模組包含一個 Android 應用程式並定義其主 Activity。 UI 程式碼大部分包含在 sharedUI 模組中，Android 應用程式將其作為 Android 程式庫使用。 UI 使用 Compose Multiplatform 架構實作。

進行一些更改並查看它們如何反映在 UI 中：

1. 導覽至 sharedUI/src/commonMain/.../greetingkmp 目錄下的 App.kt 檔案。

2. 找到 Greeting().greet() 函式呼叫。在 greet() 上按右鍵，然後選取 跳轉到 | 宣告或用法。 IDE 將開啟 sharedLogic/src/commonMain/.../Greeting.kt 檔案。

3. 在 Greeting.kt 檔案中，更新 Greeting 類別，使 greet() 函式傳回字串列表：

   class Greeting {
       private val platform: Platform = getPlatform()
   
       fun greet(): List<String> = buildList {
           add(if (Random.nextBoolean()) "Hi!" else "Hello!")
           add("Guess what this is! > ${platform.name.reversed()}!")
       }
   }

4. 根據 IDE 的建議匯入 kotlin.random.Random 套件。

5. 回到 sharedUI/src/commonMain/.../App.kt 檔案並更新 App() 實作以顯示字串列表：

   @Composable
   @Preview
   fun App() {
       MaterialTheme {
           val greeting = remember { Greeting().greet() }
   
           Column(
               modifier = Modifier
                   .padding(all = 10.dp)
                   .safeContentPadding()
                   .fillMaxSize(),
               verticalArrangement = Arrangement.spacedBy(8.dp),
           ) {
               greeting.forEach { greeting ->
                   Text(greeting)
                   HorizontalDivider()
               }
           }
       }
   }

   這裡 Column Composable 會顯示每個 Text 項目，並在它們周圍加入填補（padding）以及項目之間的間距。

6. 根據 IDE 的建議匯入缺失的相依性。

7. 現在您可以執行 Android 應用程式，查看它如何顯示字串列表：

   

更新 iOS 部分

iosApp 目錄會編譯為一個 iOS 應用程式。 它相依於並將 sharedLogic 模組作為 iOS 架構使用。 該應用程式的 UI 是使用 Swift 編寫的。

實作與 Android 應用程式相同的變更，以因應共通程式碼的更新：

1. 在 IntelliJ IDEA 中，於 專案 工具視窗的專案根目錄下找到 iosApp/iosApp 資料夾。

2. 開啟 iosApp/ContentView.swift 檔案，在 Greeting().greet() 呼叫上按右鍵，然後選取 跳轉到 | 宣告或用法。 您可以看到 IDEA 正確地將 Swift 呼叫與 Kotlin 宣告進行對應。

3. 回到 ContentView.swift 檔案。 若要以與 Android 應用程式相同的方式顯示字串列表，請將 ContentView 結構的程式碼替換為以下內容：

   struct ContentView: View {
      let phrases = Greeting().greet()
   
      var body: some View {
          List(phrases, id: \.self) {
              Text($0)
          }
      }
   }

   • greet() 呼叫的結果儲存在 phrases 變數中（Swift 中的 let 與 Kotlin 的 val 類似）。
   • List 函式會產生 Text 項目列表。

4. 啟動 iOS 執行配置以查看變更：

   

可能的問題與解決方案

Xcode 在呼叫共用框架的程式碼中回報錯誤

如果您正在使用 Xcode，您的 Xcode 專案可能仍在使用舊版本的框架。 要解決此問題，請返回 IntelliJ IDEA 並重新建置專案，或啟動 iOS 執行配置。

Xcode 在匯入共用框架時回報錯誤

如果您正在使用 Xcode，可能需要清除快取的二進位檔案：嘗試透過在主選單中選擇 Product | Clean Build Folder 來重設環境。

下一步

在教學的下一部分中，您將學習關於相依性的知識，並新增一個第三方函式庫以擴充專案的功能。

繼續下一步

取得協助

• Kotlin Slack。取得邀請並加入 #multiplatform 頻道。
• Kotlin 問題追蹤器。回報新問題。