如何在SwiftUI集成Google Mobile Ads SDK的Flutter项目中仅让CTA按钮可点击

问题核心分析 #

你的代码中，nativeAdView.callToActionView = controller.view这行将整个SwiftUI承载视图设置为了广告的可点击CTA区域，导致整个广告块都能触发点击。同时nativeAdView.isUserInteractionEnabled = false的设置逻辑错误，需要调整为仅CTA按钮可交互。

修正方案 #

1. 重构CTA按钮为原生UIButton包装 #

将SwiftUI Button替换为UIViewRepresentable包装的原生UIButton，方便直接关联到Google Ads SDK的CTA视图：

import SwiftUI
import GoogleMobileAds

struct CTAAdButton: UIViewRepresentable {
    let nativeAd: GADNativeAd
    let callToActionText: String
    
    func makeUIView(context: Context) -> UIButton {
        let button = UIButton(type: .system)
        button.setTitle(callToActionText, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = UIColor(hex: "#FFBF00")
        button.layer.cornerRadius = 10
        button.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        // 无需自定义点击事件，Google Ads SDK会自动处理
        return button
    }
    
    func updateUIView(_ uiView: UIButton, context: Context) {
        uiView.setTitle(callToActionText, for: .normal)
    }
}

2. 修改SwiftUI广告视图布局 #

替换原有的Button为新的CTAAdButton，移除空action逻辑：

import SwiftUI
import GoogleMobileAds

struct NativeVideoAdView: View {
    let nativeAd: GADNativeAd
    
    var body: some View {
        // 保留你的原有布局代码
        HStack {
            // 其他广告组件（图标、标题、正文等）
            Spacer()
            // 替换为包装后的CTA按钮
            if let callToAction = nativeAd.callToAction {
                CTAAdButton(nativeAd: nativeAd, callToActionText: callToAction)
            }
        }
        // 保留其他布局代码
    }
}

3. 修正NativeAdFactory的CTA视图关联逻辑 #

关键是仅将CTA按钮设置为广告的可点击视图，禁用其他区域的交互：

import GoogleMobileAds
import SwiftUI

class NativeVideoAdFactory: FLTNativeAdFactory {
    func createNativeAd(_ nativeAd: GADNativeAd, customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView {
        let nativeAdView = GADNativeAdView()
        let contentView = NativeVideoAdView(nativeAd: nativeAd)
        let controller = UIHostingController(rootView: contentView)
        controller.view.translatesAutoresizingMaskIntoConstraints = false
        nativeAdView.addSubview(controller.view)
        
        // 保持原有约束
        NSLayoutConstraint.activate([
            controller.view.leadingAnchor.constraint(equalTo: nativeAdView.leadingAnchor),
            controller.view.trailingAnchor.constraint(equalTo: nativeAdView.trailingAnchor),
            controller.view.topAnchor.constraint(equalTo: nativeAdView.topAnchor),
            controller.view.bottomAnchor.constraint(equalTo: nativeAdView.bottomAnchor),
        ])
        
        // 延迟获取渲染完成后的CTA按钮，设置为可点击视图
        DispatchQueue.main.async {
            self.locateAndAssignCTAButton(in: controller.view, to: nativeAdView, with: nativeAd)
        }
        
        // 禁用承载视图的交互，仅保留CTA按钮的交互
        controller.view.isUserInteractionEnabled = false
        nativeAdView.nativeAd = nativeAd
        return nativeAdView
    }
    
    // 遍历视图树找到CTA按钮并关联
    private func locateAndAssignCTAButton(in view: UIView, to nativeAdView: GADNativeAdView, with nativeAd: GADNativeAd) {
        for subview in view.subviews {
            if let button = subview as? UIButton, button.titleLabel?.text == nativeAd.callToAction {
                nativeAdView.callToActionView = button
                button.isUserInteractionEnabled = true
                break
            }
            locateAndAssignCTAButton(in: subview, to: nativeAdView, with: nativeAd)
        }
    }
}

关键逻辑说明 #

• 移除了将整个承载视图设为CTA区域的错误代码，改为仅关联实际的CTA按钮。
• 禁用了SwiftUI承载视图的交互，确保只有CTA按钮能响应点击。
• 利用视图树遍历，在渲染完成后找到CTA按钮并绑定到Google Ads SDK的callToActionView属性，SDK会自动处理点击跳转逻辑。

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