swift - 使用正确的代码将 UIView 加载到 SwiftUI

Question

我的目标是在 SwiftUI 中使用 UIView，我希望在中心有一个红色的 View 100X100，因为我为此使用了这个向下代码并且它正在工作：

    struct CustomUIViewController2: UIViewControllerRepresentable {

    func makeUIViewController(context: UIViewControllerRepresentableContext<CustomUIViewController2>) -> CustomUIViewControllerModel {
        
        return CustomUIViewControllerModel()
        
    }

    func updateUIViewController(_ uiViewController: CustomUIViewControllerModel, context: UIViewControllerRepresentableContext<CustomUIViewController2>) { }

    class CustomUIViewControllerModel: UIViewController {

        var customUIView = UIView()

        override func viewDidLoad() {
            
            super.viewDidLoad()
            
            customUIView.backgroundColor = UIColor.red
            
            view.addSubview(customUIView)
            customUIView.translatesAutoresizingMaskIntoConstraints = false
            customUIView.heightAnchor.constraint(equalToConstant: 100).isActive = true
            customUIView.widthAnchor.constraint(equalToConstant: 100).isActive = true
            customUIView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0).isActive = true
            customUIView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0).isActive = true
            
        }
  
    }
  
}

但是在使用该代码之后，我注意到我应该使用 loadView 而不是 viewDidLoad 然后我开始将向上代码重构为向下代码，我做到了，但现在结果与我想要的不同！我想要一个红色的 View 100X100 居中，正如您在向下代码中看到的那样，我试图使其居中，但它不起作用，我正在徘徊这个向下代码有什么问题，以使红色 View 100X100 居中！

    struct CustomUIViewController: UIViewControllerRepresentable {

    func makeUIViewController(context: UIViewControllerRepresentableContext<CustomUIViewController>) -> CustomUIViewControllerModel {

        return CustomUIViewControllerModel()

    }

    func updateUIViewController(_ uiViewController: CustomUIViewControllerModel, context: UIViewControllerRepresentableContext<CustomUIViewController>) {

    }

    class CustomUIViewControllerModel: UIViewController {
        // Use loadView instead of viewDidLoad
        
        override func loadView() {

            view = UIView()
            view.backgroundColor = UIColor.red
            view.translatesAutoresizingMaskIntoConstraints = false
            view.heightAnchor.constraint(equalToConstant: 100).isActive = true
            view.widthAnchor.constraint(equalToConstant: 100).isActive = true
            view.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0).isActive = true
            view.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0).isActive = true

        }
        

    }
}

---

用例：

    struct ContentView: View {
    var body: some View {

        CustomUIViewController()
            .background(Color.blue)
        
        CustomUIViewController2()
            .background(Color.blue)
        
    }
}

标签： swiftswiftui

Answer 1

当你loadView这样使用时，在第一行，你正在view为UIViewController. 因此，当您将宽度和高度设置为 100 时，这将应用于整个view.

要解决这个问题，您可以view在第一行创建您当前拥有的内容，然后为该框添加一个子视图。

struct CustomUIViewController: UIViewControllerRepresentable {
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<CustomUIViewController>) -> CustomUIViewControllerModel {
        
        return CustomUIViewControllerModel()
        
    }
    
    func updateUIViewController(_ uiViewController: CustomUIViewControllerModel, context: UIViewControllerRepresentableContext<CustomUIViewController>) {
        
    }
    
    class CustomUIViewControllerModel: UIViewController {
        // Use loadView instead of viewDidLoad
        
        override func loadView() {
            view = UIView()
            
            let boxView = UIView()
            view.addSubview(boxView)
            boxView.backgroundColor = UIColor.red
            boxView.translatesAutoresizingMaskIntoConstraints = false
            boxView.heightAnchor.constraint(equalToConstant: 100).isActive = true
            boxView.widthAnchor.constraint(equalToConstant: 100).isActive = true
            boxView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0).isActive = true
            boxView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0).isActive = true
        }
        
    }
}