鸿蒙 Tab 中的 WebView 如何优雅地拦截侧滑返回？

import { webview } from '@kit.ArkWeb';

@Component
struct DoubinTab {
  private webCtrl: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({
        src: 'https://doubao.com',  
        controller: this.webCtrl
      })
    }
    .expandSafeArea()
  }

  /**
   * 拦截系统返回键/侧滑手势
   * 返回 true  → 事件已消费，系统不再 finish
   * 返回 false → 网页已退无可退，交给系统默认处理
   */
  onBackPress(): boolean | void {
    if (this.webCtrl.accessStep(-1)) {   // 还能后退？
      this.webCtrl.backward();           // 网页回退
      return true;                       // 吃掉返回事件
    }
    return false;                        // 退无可退，正常退出
  }
}

import { Log, TabModel, getAuthPreferences } from 'basic'
import { SAFE_AREA_BOTTOM, SAFE_AREA_TOP, QuickLoginButtonComponent } from "basic";
import { Index as HomePage } from 'home';
import { AIWeb } from 'aiweb'
import { emitter } from '@kit.BasicServicesKit';
import { preferences } from '@kit.ArkData';

@Builder
function EntryBuilder() {
  NavDestination() {
    Index()
  }
  .hideTitleBar(true) // 取消自带的 bar
}

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  @State showTabBar: boolean = true
  tabsController: TabsController = new TabsController()
  controller: webview.WebviewController = new webview.WebviewController();

  onBackPress(): boolean | void {
    if (this.webCtrl.accessStep(-1)) {   // 还能后退？
      this.webCtrl.backward();           // 网页回退
      return true;                       // 吃掉返回事件
    }
    return false;                        // 退无可退，正常退出
  }

  tabList: TabModel[] = [
    {
      text: '首页',
      src: $r("app.media.icon_home"),
      acSrc: $r("app.media.icon_home_active")
    },
    {
      text: 'web',
      src: $r("app.media.icon_ai"),
      acSrc: $r("app.media.icon_ai_active")
    },
    {
      text: '设置',
      src: $r("app.media.icon_setting"),
      acSrc: $r("app.media.icon_setting_active")
    }
  ]

  build() {
    Navigation() {
      Column() {
        Tabs({ controller: this.tabsController }) {
          ForEach(this.tabList, (_: TabModel, index) => {
            TabContent() {
              if (index == 0) {
                HomePage()
              } else if (index == 1) {
                AIWeb({ controller: this.controller })
              } else {
                Text("设置")
              }
            }
          })
        }
        .onChange((index) => {
          // 统一在 onChange 中更新 currentIndex，保证判断使用的是切换前的旧值
          this.currentIndex = index
          // 切换 Tab 时强制显示底部导航栏（以防未触发 blur 时一直隐藏）
          this.showTabBar = true
        })
        .barHeight(0)
        .width('100%')
        .layoutWeight(1)

        // 底部 Tab 栏
        if (this.showTabBar) {
          Row() {
            ForEach(this.tabList, (item: TabModel, index) => {
              this.barBuilder((() => {
                item.index = index
                return item
              })())
            })
          }
          .justifyContent(FlexAlign.SpaceAround)
          .width('100%')
          .height(this.tabBarHeight + this.safeAreaBottom)
          .padding({ 
            bottom: this.safeAreaBottom,
            top: 12,
            left: 0,
            right: 0
          })
          .backgroundColor($r('app.color.tab_bar_background'))
          .shadow({ 
            offsetY: -1,
            radius: 12, 
            color: $r('app.color.tab_bar_shadow'),
            fill: true
          })
        }
      }
      .width('100%')
      .height('100%')
    }
    .mode(NavigationMode.Stack)
    .hideToolBar(true)
  }

  // ......
}

onBackPress(): boolean | void {
  // 将返回事件委派给当前 Tab 的具体实现（例如 AIWeb）
  try {
    Log.info('Entry: 进入回退判断 (委派)');
    if (this.currentIndex === 2) { // AIWeb Tab
      try { 
        emitter.emit('aiweb:back'); 
      } catch(_) {}
      return true; // 吞掉返回事件，避免应用退出
    }
  } catch(_) {}
  return false; // 其他页按默认行为处理
}

private handleBack() {
  if (this.webCtrl.accessStep(-1)) {   // 还能后退？
    this.webCtrl.backward();           // 网页回退
    return true;                       // 吃掉返回事件
  }
  return false;                        // 退无可退，正常退出
}

aboutToAppear() {
  try {
    emitter.on('aiweb:back', () => {
      this.handleBack();
    });
    this.backHandlerBound = true;
  } catch(error) { 
    Log.error(error);     
  }
}