如何在SwiftUI视图中集成@IBDesignable的CardHighlight组件？

因为CardHighlight是UIKit的UIView子类，并非SwiftUI原生的View类型，所以直接放到SwiftUI的body中会报错。需要通过UIViewRepresentable协议将其包装成SwiftUI可识别的视图。

步骤1：创建UIViewRepresentable包装器 #

创建一个结构体遵循UIViewRepresentable，用来桥接CardHighlight和SwiftUI：

import SwiftUI
import Cards

struct CardHighlightView: UIViewRepresentable {
    // 可根据需求添加需要传递给CardHighlight的配置参数
    let title: String
    let content: String
    
    // 创建并初始化CardHighlight实例
    func makeUIView(context: Context) -> CardHighlight {
        let card = CardHighlight(frame: .zero)
        // 配置CardHighlight的属性（根据组件实际API调整）
        card.title = title
        card.content = content
        // 开启自动适配布局，让SwiftUI能控制其大小
        card.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        return card
    }
    
    // 当SwiftUI状态变化时，更新CardHighlight的属性
    func updateUIView(_ uiView: CardHighlight, context: Context) {
        uiView.title = title
        uiView.content = content
    }
}

// 可选：添加便捷初始化方法，简化无参数场景的使用
extension CardHighlightView {
    init() {
        self.title = ""
        self.content = ""
    }
}

步骤2：在SwiftUI视图中使用包装后的组件 #

现在可以像使用普通SwiftUI视图一样调用CardHighlightView：

struct ContentView: View {
    var body: some View {
        CardHighlightView(title: "卡片标题", content: "这里是卡片的详细内容")
            .padding()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

额外说明 #

如果CardHighlight需要处理交互事件（比如按钮点击），可以通过UIViewRepresentable的Coordinator来桥接UIKit的代理或回调：

// 在CardHighlightView中添加Coordinator
extension CardHighlightView {
    class Coordinator: NSObject {
        // 可以在这里处理CardHighlight的回调，比如按钮点击
        @Binding var isCardTapped: Bool
        
        init(isCardTapped: Binding<Bool>) {
            _isCardTapped = isCardTapped
        }
        
        // 假设CardHighlight有点击回调方法，这里作为示例
        @objc func onCardTap() {
            isCardTapped.toggle()
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(isCardTapped: $isCardTapped)
    }
    
    // 添加绑定属性
    @Binding var isCardTapped: Bool
    
    // 在makeUIView中关联Coordinator
    func makeUIView(context: Context) -> CardHighlight {
        let card = CardHighlight(frame: .zero)
        // 假设CardHighlight有addTarget方法绑定点击事件
        card.addTarget(context.coordinator, action: #selector(Coordinator.onCardTap), for: .touchUpInside)
        // 其他配置...
        return card
    }
}

这样就能完整地将UIKit的CardHighlight组件集成到SwiftUI项目中了。

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