Flutter实现按钮首次点击后每3次点击触发广告弹窗的方法

原有代码问题排查 #

• 第一版代码错误：判断条件硬编码为clickCount >2 && clickCount <4，仅当计数为3时触发广告，既不满足首次点击展示的要求，也无法实现后续循环触发的逻辑。
• 第二版代码错误：存在两个核心问题，一是回调内漏掉了clickCount自增逻辑，计数永远停留在初始值0，每次点击都会命中clickCount %3 ==0的判断，导致每次点击都弹广告；二是判断逻辑本身不符合序列要求，即使补全自增，也会在第3、6、9次点击误触发广告。

正确实现代码 #

注意：clickCount必须定义在对应页面的State类成员变量位置，不能写在build方法内，否则页面重建时计数会被重置为0，导致逻辑失效。

// 放在State类中作为成员变量
int clickCount = 0;

// 按钮组件代码
CategoryCardWithImage(
  title: "D",
  image: "assets/images/banks.png",
  press: () {
    // 每次点击先累加计数
    clickCount++;
    // 匹配第1、4、7、10...次点击的触发规则
    bool shouldDisplayAd = (clickCount - 1) % 3 == 0;
    if (shouldDisplayAd) {
      _showInterstitialAd();
      // 若需求为弹广告时不跳转页面则保留return，若广告关闭后仍需跳转，可删除return，将跳转逻辑放到广告关闭回调中
      return;
    }
    // 非广告触发时机，正常执行页面跳转
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => BanksPage()),
    );
  },
)

优化建议 #

• 如果_showInterstitialAd()存在异步广告加载过程，建议新增bool isAdLoading = false标记位，广告加载过程中拦截点击事件，避免用户快速连点导致计数重复累加、页面多次跳转。
• 若需要广告展示结束后再执行跳转逻辑，可移除判断分支内的return语句，将页面跳转逻辑绑定到插屏广告的关闭监听回调中执行。

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