Compose Multiplatform组件无法在SwiftUI Form中渲染的问题

问题原因 #

SwiftUI的Form基于UITableView实现，嵌入的UIViewController在table单元格中无法自动计算合适的尺寸——Compose UIViewController的视图默认没有明确的intrinsic content size，导致Form的单元格高度被计算为0，最终视图被隐藏。

解决方案 #

方案1：给嵌入的Compose ViewController添加尺寸约束

修改UIViewControllerRepresentable的实现，为Compose视图明确设置高度约束：

struct KMPView: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        let composeVC = KMPView_iosKt.ComposeEntryPoint()
        composeVC.view.translatesAutoresizingMaskIntoConstraints = false
        // 根据需求设置合适高度，44为Form单元格默认高度
        NSLayoutConstraint.activate([
            composeVC.view.heightAnchor.constraint(equalToConstant: 44)
        ])
        return composeVC
    }

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

方案2：改用UIViewRepresentable封装Compose视图

相比UIViewController，UIView在SwiftUI布局中更易适配Form的table单元格布局。

首先修改KMP端的iOS代码，返回ComposeView而非UIViewController：

import androidx.compose.ui.platform.ComposeView
import platform.UIKit.UIView

fun ComposeEntryView(): UIView =
    ComposeView().apply {
        setContent {
            Text("Hello from Compose")
        }
    }

然后在SwiftUI中实现UIViewRepresentable：

struct KMPView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        return KMPView_iosKt.ComposeEntryView()
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}

方案3：直接为Form中的KMPView指定frame

如果不想修改封装逻辑，可直接在Form内给KMPView添加高度修饰：

Form {
    Section {
        KMPView()
            .frame(height: 44)
    }
}

以上三种方案都能让系统正确计算Compose视图的布局尺寸，解决Form内无法渲染的问题。

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