SwiftUI如何實現VKPinCodeView

Question

我已經在我的 SwiftUI 項目中安裝了 VKPinCodeView 依賴項，但是我無法在我的視圖文件中實現它，而且我在任何地方都找不到 VKPinCodeView 的任何文檔。 這是回購： https://github.com/Sunspension/VKPinCodeView

導入 VKPinCodeView

注冊OTPView.swift

struct RegisterOTPView: View {
    var body: some View {
        ScrollView {
            VKPinCodeView()
        }
    }
}

在 repo 中只提到：

override func viewDidLoad() {
   super.viewDidLoad()
        
   let pinView = VKPinCodeView()
   pinView.translatesAutoresizingMaskIntoConstraints = false
   view.addSubview(pinView)
   pinView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40).isActive = true
   pinView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -40).isActive = true
   pinView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
   pinView.heightAnchor.constraint(equalToConstant: 50).isActive = true
   pinView.onSettingStyle = { UnderlineStyle() }
   pinView.becomeFirstResponder()
}

如果我沒記錯這是 storyboard 架構，我如何在 SwiftUI 中使用它？ 謝謝你。

Answer 1

VKPinCodeView是一個UIView ，所以不能直接在 SwiftUI 中使用。 它必須被包裹在UIViewRepresentable中。

這將是最小的設置：

struct VKPinCodeViewWrapper : UIViewRepresentable {
    func makeUIView(context: Context) -> VKPinCodeView {
        let view = VKPinCodeView()
        view.onSettingStyle = { UnderlineStyle() } //taken from your example code
        view.becomeFirstResponder() //taken from your example code
        return view
    }
    
    func updateUIView(_ uiView: VKPinCodeView, context: Context) {
        //
    }
}

struct RegisterOTPView: View {
    var body: some View {
           VKPinCodeViewWrapper()
    }
}

我沒有使用過這個特定的庫，因此您可能需要考慮或更改makeUIView中設置的內容與updateUIView中完成的內容，例如成為第一響應者。 可以做一些實驗。

更多關於 UIViewRepresentable 的閱讀： https://developer.apple.com/documentation/swiftui/uiviewrepresentable https://www.hackingwithswift.com/quick-start/swiftui/how-to-wrap-a-custom-uiview-for-迅捷