如何让自定义UIViewRepresentable填充父VStack并居中内部子视图？

问题根源 #

之前的代码里，CustomViewRepresentable初始化时给CustomView固定了300x300的frame，且CustomView没有开启自动适配父容器的属性，导致SwiftUI的.frame修饰符无法生效；同时手动设置containerView的center的方式不够可靠，无法稳定跟随CustomView的尺寸变化。

修改后的代码 #

CustomViewRepresentable

import UIKit
import SwiftUI

struct CustomViewRepresentable: UIViewRepresentable {
    typealias UIViewType = CustomView
    
    func makeUIView(context: Context) -> CustomView {
        let customView = CustomView()
        // 开启自动适配，让CustomView跟随父容器调整宽高
        customView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        return customView
    }

    func updateUIView(_ uiView: CustomView, context: Context) {
        // 尺寸变化时触发重新布局
        uiView.setNeedsLayout()
    }
}

CustomView

import UIKit

class CustomView: UIView {
    private let containerView = UIView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupContainerLayout()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupContainerLayout()
    }
    
    private func setupContainerLayout() {
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.backgroundColor = .orange // 加颜色方便观察效果
        addSubview(containerView)
        
        // 用AutoLayout固定containerView尺寸并居中，无需手动调整位置
        NSLayoutConstraint.activate([
            containerView.widthAnchor.constraint(equalToConstant: 300),
            containerView.heightAnchor.constraint(equalToConstant: 300),
            containerView.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            containerView.centerYAnchor.constraint(equalTo: self.centerYAnchor)
        ])
    }
}

ContentView（可简化）

import SwiftUI
import UIKit

struct ContentView: View {
    
    var body: some View {
        VStack(alignment: .center, spacing: 0) {
            VStack {
                Color.blue
                    .frame(height: 50)
            }
            VStack {
                HStack {
                    Color.green
                        .frame(height: 100)
                    Text("Text")
                    Color.green
                        .frame(height: 100)
                }
            }
            VStack {
                GeometryReader { geometry in
                    CustomViewRepresentable()
                        .frame(width: geometry.size.width, height: geometry.size.height)
                        .background(.gray)
                        .border(.red, width: 1)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

效果说明 #

修改后：

1. CustomView会自动填充SwiftUI分配的全部父容器空间
2. 内部300x300的containerView通过AutoLayout始终保持在CustomView中心，无论父容器尺寸如何变化

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