如何在UIViewRepresentable的UIButton中设置背景图自定义框架？

针对你遇到的背景图拉伸全屏问题，以及自定义按钮框架的需求，提供以下几种解决方案：

1. 调整图片的可拉伸区域（适配带圆角/边框的按钮图） #

如果你的button.png是带圆角或固定边框的图片，直接设置背景图会导致边缘被拉伸变形。可以通过resizableImage(withCapInsets:)指定图片的可拉伸区域，让边缘保持原尺寸，仅中间区域拉伸：

struct MSButton: UIViewRepresentable {
    
    var label: String
    var action: (() -> Void)?
    
    init(_ label: String, action: @escaping () -> Void) {
        self.label = label
        self.action = action
    }
    
    func makeUIView(context: Context) -> UIButton {
        let button = UIButton()
        button.setTitle(label, for: .normal)
        
        // 根据实际图片的边缘尺寸调整capInsets数值，示例为上下左右各10pt不拉伸
        if let bgImage = UIImage(named: "button.png")?.resizableImage(withCapInsets: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10), resizingMode: .stretch) {
            button.setBackgroundImage(bgImage, for: .normal)
        }
        
        // 绑定点击事件
        button.addTarget(context.coordinator, action: #selector(Coordinator.buttonTapped), for: .touchUpInside)
        return button
    }
    
    func updateUIView(_ uiView: UIButton, context: Context) {
        uiView.setTitle(label, for: .normal)
    }
    
    // 用Coordinator处理点击逻辑
    class Coordinator: NSObject {
        var action: (() -> Void)?
        
        init(action: @escaping () -> Void) {
            self.action = action
        }
        
        @objc func buttonTapped() {
            action?()
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(action: action!)
    }
}

2. 自定义按钮的尺寸与内容模式 #

通过设置按钮的contentMode避免图片拉伸，同时指定按钮的固有尺寸或直接设置frame：

struct MSButton: UIViewRepresentable {
    
    var label: String
    var action: (() -> Void)?
    
    init(_ label: String, action: @escaping () -> Void) {
        self.label = label
        self.action = action
    }
    
    func makeUIView(context: Context) -> UIButton {
        let button = UIButton(type: .custom)
        button.setTitle(label, for: .normal)
        button.setBackgroundImage(UIImage(named: "button.png"), for: .normal)
        
        // 设置图片内容模式，避免拉伸变形
        button.contentMode = .scaleAspectFit
        // 自定义按钮固有尺寸，SwiftUI会以此为基础布局
        button.intrinsicContentSize = CGSize(width: 180, height: 44)
        
        // 绑定点击事件
        button.addTarget(context.coordinator, action: #selector(Coordinator.buttonTapped), for: .touchUpInside)
        return button
    }
    
    func updateUIView(_ uiView: UIButton, context: Context) {
        uiView.setTitle(label, for: .normal)
    }
    
    // Coordinator部分同方案1
    class Coordinator: NSObject {
        var action: (() -> Void)?
        
        init(action: @escaping () -> Void) {
            self.action = action
        }
        
        @objc func buttonTapped() {
            action?()
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(action: action!)
    }
}

3. 在SwiftUI层直接控制按钮尺寸 #

不需要修改MSButton内部，在使用时通过SwiftUI的frame修饰符指定按钮大小，同时确保图片适配：

struct MSButton_Previews: PreviewProvider {
    static var previews: some View {
        MSButton("测试按钮") {
            print("按钮被点击")
        }
        .frame(width: 200, height: 50) // 自定义按钮框架大小
    }
}

注：你的原代码遗漏了点击事件绑定，上述方案已补充Coordinator逻辑，确保按钮点击能触发传入的闭包。

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