iOS Swift中SwiftUI View转UIView的优化及约束问题排查

问题说明 #

当前通过UIHostingController将SwiftUI的ContentView转为UIView给Flutter Platform Channel使用时，出现黑框、排版异常；调整约束逻辑后触发约束报错，报错信息翻译如下：

Thread 1: "无法激活锚点`<NSLayoutYAxisAnchor:0x283032200 "TtGC7SwiftUI14_UIHostingViewV6Runner11ContentView:0x10506aa00.top"> 和 <NSLayoutYAxisAnchor:0x2830320c0 "UIView:0x1043cfa00.top"> 的约束，因为它们没有共同的父视图。约束或其锚点是否引用了不同视图层级中的元素？这是不合法的。"

问题根源 #

原代码中先激活约束再将子视图添加到父视图，此时两个视图不属于同一层级，导致约束失效；同时额外嵌套了一层无用的UIViewController，增加了视图层级复杂度，引发排版异常。

优化方案 #

简化FluffView实现 #

移除冗余的父视图控制器，直接使用UIHostingController的view作为返回值，确保约束逻辑在正确的视图层级下执行：

public class FluffView: NSObject, FlutterPlatformView {
    let frame: CGRect
    let viewId: Int64
    private let hostingController: UIHostingController<ContentView>

    init(_ frame: CGRect, viewId: Int64, args: Any?) {
        self.frame = frame
        self.viewId = viewId
        // 直接初始化HostingController关联ContentView
        self.hostingController = UIHostingController(rootView: ContentView())
        super.init()
        setupViewConstraints()
    }

    private func setupViewConstraints() {
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        // 绑定Flutter传入的frame尺寸，避免排版偏移
        NSLayoutConstraint.activate([
            hostingController.view.widthAnchor.constraint(equalToConstant: frame.width),
            hostingController.view.heightAnchor.constraint(equalToConstant: frame.height)
        ])
    }

    public func view() -> UIView {
        // 直接返回HostingController的view，无需额外嵌套
        return hostingController.view
    }
}

优化ContentView适配性 #

让ContentView自适应父视图尺寸，避免固定高度导致的排版问题：

struct ContentView: View {
    let context: DeviceActivityReport.Context = .totalActivity
    let filter: DeviceActivityFilter
    
    init() {
        self.filter = DeviceActivityFilter(
            segment: .daily(
                during: DateInterval(
                    start: Date().addingTimeInterval(-24 * 3600),
                    end: Date()
                )
            )
        )
    }
    
    var body: some View {
        DeviceActivityReport(context, filter: filter)
            .frame(maxWidth: .infinity, maxHeight: .infinity) // 自适应父视图尺寸
    }
}

关键优化点 #

• 移除冗余的UIViewController嵌套，减少视图层级，避免黑框和排版异常
• 先初始化UIHostingController再设置约束，确保视图处于同一层级，解决约束报错
• 直接绑定Flutter传入的frame参数，保证尺寸匹配
• 让SwiftUI视图自适应父视图，增强适配灵活性

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