UIViewRepresentable忽略封装UIButton内部约束问题求解

问题场景 #

我有一个UIButton子类，在内部通过NSLayoutConstraints定义了自身宽高，需要封装进UIViewRepresentable以在SwiftUI中复用，同时该按钮还要能在常规UIKit界面中正常使用。但运行后按钮的宽高约束未生效，且不能移除按钮内部的约束，也不能在SwiftUI视图中直接设置frame。相关代码如下：

struct TestView: View {
    var body: some View {
        TestButtonWrapper()
            .background(Color.red)
    }
}

final class TestButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }

    func setup() {
        translatesAutoresizingMaskIntoConstraints = false
        setTitle("Hello", for: .normal)
        // 这些约束被忽略：
        heightAnchor.constraint(equalToConstant: 200).isActive = true
        widthAnchor.constraint(equalToConstant: 300).isActive = true
    }
}

struct TestButtonWrapper: UIViewRepresentable {
    func makeUIView(context: Context) -> TestButton {
        let view = TestButton()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        view.setContentHuggingPriority(.defaultHigh, for: .vertical)
        return view
    }

    func updateUIView(_ uiView: TestButton, context: Context) {
    }
}

问题原因 #

SwiftUI的UIViewRepresentable会把封装的UIKit视图包裹在自适应容器中，这个容器默认不会主动遵循UIKit视图的内部尺寸约束。当你给TestButton设置translatesAutoresizingMaskIntoConstraints = false后，SwiftUI布局系统无法正确识别按钮的内部宽高约束——因为它需要明确的尺寸提示（即固有内容尺寸intrinsicContentSize）来确定容器大小，而你的按钮没有提供这个尺寸，导致内部约束被忽略。

另外，TestButtonWrapper中重复设置translatesAutoresizingMaskIntoConstraints = false属于多余操作，按钮内部已经完成了这个设置。

解决方案 #

核心是让TestButton正确返回固有内容尺寸，同时确保UIViewRepresentable容器能遵循这个尺寸：

• 重写TestButton的intrinsicContentSize属性，返回约束中定义的宽高值；
• 激活约束后调用invalidateIntrinsicContentSize()，通知布局系统更新固有尺寸；
• 移除UIViewRepresentable中多余的translatesAutoresizingMaskIntoConstraints设置。

修正后的代码 #

struct TestView: View {
    var body: some View {
        TestButtonWrapper()
            .background(Color.red)
    }
}

final class TestButton: UIButton {
    private let desiredWidth: CGFloat = 300
    private let desiredHeight: CGFloat = 200
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }

    func setup() {
        translatesAutoresizingMaskIntoConstraints = false
        setTitle("Hello", for: .normal)
        
        // 保留内部约束
        heightAnchor.constraint(equalToConstant: desiredHeight).isActive = true
        widthAnchor.constraint(equalToConstant: desiredWidth).isActive = true
        
        // 通知布局系统更新固有尺寸
        invalidateIntrinsicContentSize()
    }
    
    // 重写固有内容尺寸，返回预设宽高
    override var intrinsicContentSize: CGSize {
        CGSize(width: desiredWidth, height: desiredHeight)
    }
}

struct TestButtonWrapper: UIViewRepresentable {
    func makeUIView(context: Context) -> TestButton {
        let view = TestButton()
        view.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        view.setContentHuggingPriority(.defaultHigh, for: .vertical)
        return view
    }

    func updateUIView(_ uiView: TestButton, context: Context) {
    }
}

补充说明 #

修改后，TestButton既能在SwiftUI中正常显示预设宽高，也能在UIKit界面中直接复用——UIKit布局系统会同时识别内部约束和固有内容尺寸，不会产生冲突。如果后续需要动态修改宽高，只需更新desiredWidth/desiredHeight并调用invalidateIntrinsicContentSize()即可，内部约束会同步生效。

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