如何在Compose Multiplatform项目中集成并调用iOS SwiftUI界面？

一、最优实现方案 #

• 优先使用官方iOSView API：这是Compose Multiplatform官方提供的原生视图集成方式，直接在Kotlin代码中嵌入SwiftUI/UIKit视图，无需额外中间层，性能损耗最低，适配性最好。
• 基于Kotlin/Native实现双向通信：如果需要Compose与SwiftUI之间传递数据或触发操作，用expect/actual机制或者闭包回调实现，避免引入复杂的跨语言通信框架。
• 封装可复用Composable容器：将SwiftUI视图封装成标准Kotlin Composable函数，统一对外暴露接口，方便在项目的Compose代码中随处调用。

二、代码示例 #

1. iOS端定义SwiftUI视图 #

先在iOS模块中创建带回调和参数的SwiftUI视图，并封装为UIKit兼容的ViewController：

import SwiftUI

// 核心SwiftUI视图
struct SampleSwiftUIView: View {
    let onBackTap: () -> Void
    let composeMessage: String
    let onContentChange: (String) -> Void
    
    @State private var inputContent = ""
    
    var body: some View {
        VStack(spacing: 24) {
            Text(composeMessage)
                .font(.title)
                .foregroundColor(.blue)
            TextField("输入内容同步到Compose", text: $inputContent)
                .textFieldStyle(.roundedBorder)
                .onChange(of: inputContent) { newValue in
                    onContentChange(newValue)
                }
            Button("返回Compose界面") {
                onBackTap()
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
        .navigationTitle("SwiftUI页面")
    }
}

// 封装为UIViewController，供Kotlin调用
struct SwiftUIWrapperViewController: UIViewControllerRepresentable {
    let onBackTap: () -> Void
    let composeMessage: String
    let onContentChange: (String) -> Void
    
    func makeUIViewController(context: Context) -> UIViewController {
        let rootView = SampleSwiftUIView(
            onBackTap: onBackTap,
            composeMessage: composeMessage,
            onContentChange: onContentChange
        )
        return UIHostingController(rootView: rootView)
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

2. Kotlin Compose中调用SwiftUI视图 #

在共享模块或iOS专属Kotlin代码里，用iOSView嵌入上述SwiftUI视图，并实现双向交互：

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.iOSView

@Composable
fun SwiftUIIntegrationDemo() {
    val showSwiftUI = remember { mutableStateOf(false) }
    val contentFromSwift = remember { mutableStateOf("") }

    if (showSwiftUI.value) {
        // 嵌入SwiftUI视图
        iOSView(
            modifier = Modifier.fillMaxSize(),
            factory = {
                SwiftUIWrapperViewController(
                    composeMessage = "来自Compose的问候",
                    onBackTap = {
                        showSwiftUI.value = false
                    },
                    onContentChange = { text ->
                        contentFromSwift.value = text
                    }
                ).viewController
            }
        )
    } else {
        // Compose原生界面
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("SwiftUI返回的内容: ${contentFromSwift.value}")
            Button(
                onClick = { showSwiftUI.value = true },
                modifier = Modifier.padding(top = 16)
            ) {
                Text("打开SwiftUI界面")
            }
        }
    }
}

三、关键注意事项 #

• 回调生命周期管理：传递给Swift的闭包要注意和Compose组件生命周期绑定，避免组件销毁后回调仍存在导致内存泄漏。
• 视图更新逻辑：如果Compose状态变化需要同步更新SwiftUI视图，要在iOSView的update参数中修改ViewController的对应属性。
• 版本兼容性：确保Compose Multiplatform、Kotlin、iOS SDK版本匹配，优先使用官方稳定版组合。

内容的提问来源于stack exchange，提问作者cyber wolf