KMM Compose Multiplatform实现iOS/Android平台特定视图的问题

作为Kotlin和Compose Multiplatform新手，在实现iOS与Android平台特定View时，Android端按钮正常显示，但iOS端按钮不可见（双平台运行均无报错）；同时希望了解是否可桥接SwiftUI生成Composable View，以及如何替换返回类型Any实现类型安全。

一、iOS按钮不可见的修复 #

直接返回UIButton实例无法被Compose Multiplatform的iOS渲染系统识别，必须用UIKitView将原生UI控件包裹为Composable兼容的容器。修改iosMain中的PlatformButton实现：

import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.UIKitView
import kotlinx.cinterop.ExperimentalForeignApi
import kotlinx.cinterop.ObjCAction
import platform.UIKit.UIButton
import platform.UIKit.UIButtonTypeSystem
import platform.UIKit.UIControlEventTouchUpInside
import platform.darwin.NSObject
import platform.darwin.sel_registerName

actual class PlatformButton {
    actual companion object {
        @OptIn(ExperimentalForeignApi::class)
        @Composable
        actual fun createButton(label: String, onClick: () -> Unit) {
            UIKitView(
                factory = {
                    val uiButton = UIButton.buttonWithType(UIButtonTypeSystem)
                    uiButton.setTitle(label, forState = 0u)

                    val block = object : NSObject() {
                        @ObjCAction
                        fun buttonClicked() {
                            onClick()
                        }
                    }

                    uiButton.addTarget(block, action = sel_registerName("buttonClicked"), forControlEvents = UIControlEventTouchUpInside)
                    uiButton
                },
                update = { button ->
                    button.setTitle(label, forState = 0u)
                }
            )
        }
    }
}

二、替换Any的类型安全方案 #

Composable函数的核心职责是渲染UI而非返回View实例，因此可将返回类型改为Unit，彻底避免无类型的Any：

commonMain中的expect类修改： #

import androidx.compose.runtime.Composable

expect class PlatformButton {
    companion object {
        @Composable
        fun createButton(label: String, onClick: () -> Unit)
    }
}

androidMain中的actual类修改： #

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

actual class PlatformButton {
    actual companion object {
        @Composable
        actual fun createButton(label: String, onClick: () -> Unit) {
            Button(onClick) {
                Text(label)
            }
        }
    }
}

三、桥接SwiftUI实现Composable View #

可以通过以下三步实现SwiftUI与Compose的桥接：

1. 编写SwiftUI按钮（iOS模块Swift代码）：

import SwiftUI

struct SwiftUICounterButton: View {
    let label: String
    let onClick: () -> Void
    
    var body: some View {
        Button(action: onClick) {
            Text(label)
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
    }
}

2. 用UIHostingController包装SwiftUI View（iOS模块Swift代码）：

import UIKit
import SwiftUI

class SwiftUIButtonHostController: UIViewController {
    init(label: String, onClick: @escaping () -> Void) {
        super.init(nibName: nil, bundle: nil)
        let swiftUIView = SwiftUICounterButton(label: label, onClick: onClick)
        let hostingController = UIHostingController(rootView: swiftUIView)
        addChild(hostingController)
        view.addSubview(hostingController.view)
        hostingController.view.frame = view.bounds
        hostingController.didMove(toParent: self)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

3. 在Kotlin中通过UIKitView加载（iosMain代码）：

import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.UIKitView
import platform.UIKit.UIViewController

actual class PlatformButton {
    actual companion object {
        @Composable
        actual fun createButton(label: String, onClick: () -> Unit) {
            UIKitView(
                factory = {
                    SwiftUIButtonHostController(label = label, onClick = onClick)
                },
                update = { controller ->
                    // 如需动态更新label，可在此添加逻辑
                }
            )
        }
    }
}

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