与SwiftUI框架的集成

Compose Multiplatform 可与 SwiftUI 框架互操作。
您既可以在 SwiftUI 应用中嵌入 Compose Multiplatform，也可以在 Compose Multiplatform 界面中嵌入原生 SwiftUI 组件。
本页提供了在 SwiftUI 中使用 Compose Multiplatform 以及在 Compose Multiplatform 应用中嵌入 SwiftUI 的示例。

在 SwiftUI 应用中使用 Compose Multiplatform

要在 SwiftUI 应用中使用 Compose Multiplatform，需创建一个 Kotlin 函数 MainViewController()，
该函数返回 UIKit 的 UIViewController
并包含 Compose Multiplatform 代码：

fun MainViewController(): UIViewController =
    ComposeUIViewController {
        Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Text("这是 Compose 代码", fontSize = 20.sp)
        }
    }

ComposeUIViewController()
是 Compose Multiplatform 库函数，接受一个可组合函数作为 content 参数。
以这种方式传入的函数可以调用其他可组合函数，例如 Text()。

接下来，需要一个在 SwiftUI 中代表 Compose Multiplatform 的结构体。
创建以下结构体将 UIViewController 实例转换为 SwiftUI 视图：

struct ComposeViewController: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        return Main_iosKt.MainViewController()
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
    }
}

现在您可以在其他 SwiftUI 代码中使用 ComposeView 结构体。

Main_iosKt.MainViewController 是自动生成的名称。
关于从 Swift 访问 Kotlin 代码的更多信息，请参阅与 Swift/Objective-C 的互操作性页面。

最终，您的应用应如下所示：

您可以在任何 SwiftUI 视图层次结构中使用此 ComposeView ，并通过 SwiftUI 代码控制其大小。

若要在现有应用中嵌入 Compose Multiplatform，可在任何使用 SwiftUI 的地方使用 ComposeView 结构体。
示例请参考我们的示例项目。

在 Compose Multiplatform 中使用 SwiftUI

要在 Compose Multiplatform 中使用 SwiftUI，需将 Swift 代码添加到中间的 UIViewController。
目前无法直接在 Kotlin 中编写 SwiftUI 结构体，而是需要在 Swift 中编写后传递给 Kotlin 函数。

首先，在入口点函数中添加参数以创建 ComposeUIViewController 组件：

@OptIn(ExperimentalForeignApi::class)
fun ComposeEntryPointWithUIViewController(
    createUIViewController: () -> UIViewController
): UIViewController =
    ComposeUIViewController {
        Column(
            Modifier
                .fillMaxSize()
                .windowInsetsPadding(WindowInsets.systemBars),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("如何在 Compose Multiplatform 中使用 SwiftUI")
            UIKitViewController(
                factory = createUIViewController,
                modifier = Modifier.size(300.dp).border(2.dp, Color.Blue),
            )
        }
    }

在 Swift 代码中，将 createUIViewController 传递给入口点函数。
可使用 UIHostingController 实例包装 SwiftUI 视图：

Main_iosKt.ComposeEntryPointWithUIViewController(createUIViewController: { () -> UIViewController in
    let swiftUIView = VStack {
        Text("Compose Multiplatform 中的 SwiftUI")
    }
    return UIHostingController(rootView: swiftUIView)
})

最终，您的应用应如下所示：

完整代码示例请参考示例项目。

后续步骤

您还可以探索 Compose Multiplatform 与 UIKit 框架集成的方式。

22 四月 2025