鸿蒙HarmonyOS ArkTS沉浸式效果开发详解

什么是沉浸式效果

在鸿蒙HarmonyOS的ArkTS开发框架中，沉浸式效果（Immersive Effects）是指通过隐藏或半透明化系统UI元素，让应用内容能够延伸到整个屏幕区域，从而创造出更加沉浸和专注的用户体验。这种设计理念源于现代移动设备对屏幕空间利用率的极致追求，通过减少视觉干扰，让用户能够更专注于应用的核心内容。

沉浸式效果的核心在于对状态栏、导航栏等系统UI的处理。传统的应用界面通常被限制在系统UI之间的安全区域内，而沉浸式设计则突破了这种限制，让应用内容能够覆盖整个屏幕。这种设计不仅能够提供更大的内容展示空间，还能营造出更加现代和专业的视觉体验。

沉浸式效果在不同类型的应用中有着不同的表现形式。在游戏应用中，沉浸式效果能够消除系统UI的干扰，让玩家完全专注于游戏世界；在视频播放应用中，沉浸式效果能够提供影院级的观看体验；在阅读应用中，沉浸式效果能够减少视觉噪音，提升阅读专注度。

沉浸式设计还需要考虑用户的操作习惯和可访问性需求。虽然隐藏了系统UI，但用户仍然需要能够方便地进行返回、切换应用等操作。因此，好的沉浸式设计需要在视觉效果和功能可用性之间找到平衡点，确保用户既能享受沉浸式体验，又不会在操作上遇到困难。

沉浸式效果的核心机制

窗口模式控制

沉浸式效果的实现主要依赖于窗口模式的控制。鸿蒙系统提供了多种窗口模式，包括全屏模式、沉浸式模式、悬浮窗模式等。每种模式对应不同的系统UI显示策略和用户交互方式。全屏模式完全隐藏系统UI，适合游戏和视频播放等场景；沉浸式模式保持系统UI的功能性，但将其视觉影响降到最低。

窗口模式的切换需要考虑应用的生命周期和用户的操作流程。应用可以在启动时设置初始的窗口模式，也可以根据用户的操作动态切换模式。例如，视频应用可以在用户点击全屏按钮时切换到全屏模式，在用户需要操作时又切换回普通模式。

窗口模式的管理还涉及到多窗口和分屏场景的处理。在平板设备上，应用可能需要在多窗口环境中运行，此时沉浸式效果的表现需要适应分屏的布局约束。系统会根据当前的窗口状态自动调整沉浸式效果的行为，确保在各种场景下都能提供合适的用户体验。

状态栏和导航栏处理

状态栏和导航栏是沉浸式效果处理的重点对象。状态栏显示时间、电量、网络状态等系统信息，导航栏提供返回、主页、最近任务等导航功能。沉浸式效果通过控制这些元素的显示状态、透明度、颜色等属性来实现视觉效果的优化。

状态栏的处理方式包括完全隐藏、半透明显示、改变颜色等。完全隐藏适合需要最大化内容展示空间的场景，如游戏和视频播放；半透明显示在保持系统信息可见性的同时减少视觉干扰；改变颜色则可以让状态栏更好地融入应用的整体设计风格。

导航栏的处理相对复杂，因为它承载着重要的导航功能。现代鸿蒙设备多采用手势导航，可以在保持导航功能的同时隐藏导航栏的视觉元素。对于仍使用按键导航的设备，可以通过调整导航栏的透明度和颜色来减少其视觉影响。

安全区域适配

沉浸式效果的实现必须考虑设备的安全区域。现代移动设备由于异形屏、刘海屏、曲面屏等设计，存在着各种形状的非显示区域或受限显示区域。应用在实现沉浸式效果时，需要确保重要内容不会被这些区域遮挡或截断。

安全区域的适配需要动态获取设备的屏幕参数，包括状态栏高度、导航栏高度、刘海区域、圆角半径等。这些参数会因设备型号、系统版本、用户设置等因素而变化，应用需要能够实时适应这些变化。

安全区域适配还需要考虑横竖屏切换的场景。设备旋转时，安全区域的位置和大小都会发生变化，应用需要重新计算布局参数，确保内容在新的屏幕方向下仍然能够正确显示。这种动态适配机制是实现良好沉浸式效果的关键技术。

沉浸式效果的实现方法

基础沉浸式窗口设置

基础的沉浸式效果实现主要通过窗口属性的配置来完成。需要在应用启动时或特定场景下设置窗口的显示模式、系统UI的可见性等属性。

// 沉浸式效果管理类
export class ImmersiveManager {
  private windowStage: window.WindowStage | null = null
  private mainWindow: window.Window | null = null
  private currentMode: ImmersiveMode = ImmersiveMode.NORMAL
  private statusBarHeight: number = 0
  private navigationBarHeight: number = 0

  // 沉浸式模式枚举
  enum ImmersiveMode {
    NORMAL = 'normal',           // 普通模式
    IMMERSIVE = 'immersive',     // 沉浸式模式
    FULLSCREEN = 'fullscreen',   // 全屏模式
    FLOATING = 'floating'        // 悬浮模式
  }

  // 初始化沉浸式管理器
  async initialize(windowStage: window.WindowStage): Promise<void> {
    try {
      this.windowStage = windowStage
      this.mainWindow = await windowStage.getMainWindow()
      
      // 获取系统UI尺寸信息
      await this.updateSystemUIInfo()
      
      // 设置窗口属性
      await this.setupWindowProperties()
      
      console.log('沉浸式管理器初始化成功')
    } catch (error) {
      console.error('沉浸式管理器初始化失败:', error)
    }
  }

  // 更新系统UI信息
  private async updateSystemUIInfo(): Promise<void> {
    if (!this.mainWindow) return

    try {
      // 获取窗口属性
      const windowProperties = await this.mainWindow.getWindowProperties()
      
      // 获取安全区域信息
      const cutoutInfo = await this.mainWindow.getCutoutInfo()
      
      // 计算状态栏和导航栏高度
      this.statusBarHeight = windowProperties.windowRect.top
      this.navigationBarHeight = windowProperties.windowRect.height - 
                                windowProperties.windowRect.bottom
      
      console.log(`系统UI信息 - 状态栏高度: ${this.statusBarHeight}, 导航栏高度: ${this.navigationBarHeight}`)
    } catch (error) {
      console.error('获取系统UI信息失败:', error)
    }
  }

  // 设置窗口基础属性
  private async setupWindowProperties(): Promise<void> {
    if (!this.mainWindow) return

    try {
      // 设置窗口背景色
      await this.mainWindow.setWindowBackgroundColor('#000000')
      
      // 设置窗口亮度
      await this.mainWindow.setWindowBrightness(1.0)
      
      // 设置屏幕常亮
      await this.mainWindow.setWindowKeepScreenOn(true)
      
      console.log('窗口基础属性设置完成')
    } catch (error) {
      console.error('设置窗口属性失败:', error)
    }
  }

  // 进入沉浸式模式
  async enterImmersiveMode(mode: ImmersiveMode = ImmersiveMode.IMMERSIVE): Promise<boolean> {
    if (!this.mainWindow) {
      console.error('窗口未初始化')
      return false
    }

    try {
      this.currentMode = mode

      switch (mode) {
        case ImmersiveMode.IMMERSIVE:
          await this.setImmersiveMode()
          break
        case ImmersiveMode.FULLSCREEN:
          await this.setFullScreenMode()
          break
        case ImmersiveMode.FLOATING:
          await this.setFloatingMode()
          break
        default:
          await this.setNormalMode()
      }

      console.log(`已切换到${mode}模式`)
      return true
    } catch (error) {
      console.error(`切换到${mode}模式失败:`, error)
      return false
    }
  }

  // 设置沉浸式模式
  private async setImmersiveMode(): Promise<void> {
    if (!this.mainWindow) return

    // 设置系统UI可见性
    await this.mainWindow.setWindowSystemBarEnable(['status', 'navigation'])
    
    // 设置状态栏样式
    await this.mainWindow.setWindowSystemBarProperties({
      statusBarColor: '#00000000',        // 透明状态栏
      navigationBarColor: '#00000000',    // 透明导航栏
      statusBarContentColor: '#ffffff',   // 状态栏内容为白色
      navigationBarContentColor: '#ffffff' // 导航栏内容为白色
    })

    // 设置窗口布局全屏
    await this.mainWindow.setWindowLayoutFullScreen(true)
  }

  // 设置全屏模式
  private async setFullScreenMode(): Promise<void> {
    if (!this.mainWindow) return

    // 隐藏系统UI
    await this.mainWindow.setWindowSystemBarEnable([])
    
    // 设置窗口布局全屏
    await this.mainWindow.setWindowLayoutFullScreen(true)
  }

  // 设置悬浮模式
  private async setFloatingMode(): Promise<void> {
    if (!this.mainWindow) return

    // 恢复系统UI显示
    await this.mainWindow.setWindowSystemBarEnable(['status', 'navigation'])
    
    // 设置半透明效果
    await this.mainWindow.setWindowSystemBarProperties({
      statusBarColor: '#80000000',
      navigationBarColor: '#80000000',
      statusBarContentColor: '#ffffff',
      navigationBarContentColor: '#ffffff'
    })

    await this.mainWindow.setWindowLayoutFullScreen(false)
  }

  // 设置普通模式
  private async setNormalMode(): Promise<void> {
    if (!this.mainWindow) return

    // 恢复系统UI显示
    await this.mainWindow.setWindowSystemBarEnable(['status', 'navigation'])
    
    // 恢复默认系统UI样式
    await this.mainWindow.setWindowSystemBarProperties({
      statusBarColor: '#ffffff',
      navigationBarColor: '#ffffff',
      statusBarContentColor: '#000000',
      navigationBarContentColor: '#000000'
    })

    await this.mainWindow.setWindowLayoutFullScreen(false)
  }

  // 退出沉浸式模式
  async exitImmersiveMode(): Promise<boolean> {
    return await this.enterImmersiveMode(ImmersiveMode.NORMAL)
  }

  // 获取当前模式
  getCurrentMode(): ImmersiveMode {
    return this.currentMode
  }

  // 获取安全区域信息
  getSafeAreaInfo(): SafeAreaInfo {
    return {
      statusBarHeight: this.statusBarHeight,
      navigationBarHeight: this.navigationBarHeight,
      safeAreaTop: this.statusBarHeight,
      safeAreaBottom: this.navigationBarHeight
    }
  }

  // 监听窗口变化
  onWindowChange(callback: (mode: ImmersiveMode) => void): void {
    if (!this.mainWindow) return

    this.mainWindow.on('windowSizeChange', () => {
      this.updateSystemUIInfo()
      callback(this.currentMode)
    })
  }

  // 销毁管理器
  destroy(): void {
    if (this.mainWindow) {
      this.mainWindow.off('windowSizeChange')
    }
    this.windowStage = null
    this.mainWindow = null
  }
}

// 安全区域信息接口
interface SafeAreaInfo {
  statusBarHeight: number
  navigationBarHeight: number
  safeAreaTop: number
  safeAreaBottom: number
}

// 沉浸式效果组件
@Component
export struct ImmersiveContainer {
  @State private immersiveManager: ImmersiveManager = new ImmersiveManager()
  @State private currentMode: ImmersiveMode = ImmersiveMode.NORMAL
  @State private safeAreaInfo: SafeAreaInfo = {
    statusBarHeight: 0,
    navigationBarHeight: 0,
    safeAreaTop: 0,
    safeAreaBottom: 0
  }
  
  @BuilderParam content: () => void
  private windowStage?: window.WindowStage

  aboutToAppear() {
    this.initializeImmersive()
  }

  aboutToDisappear() {
    this.immersiveManager.destroy()
  }

  build() {
    Stack() {
      // 背景层
      Column()
        .width('100%')
        .height('100%')
        .backgroundColor('#000000')

      // 内容层
      Column() {
        // 状态栏占位
        if (this.currentMode !== ImmersiveMode.FULLSCREEN) {
          Row()
            .width('100%')
            .height(this.safeAreaInfo.statusBarHeight)
            .backgroundColor('transparent')
        }

        // 主要内容区域
        Column() {
          if (this.content) {
            this.content()
          }
        }
        .layoutWeight(1)
        .width('100%')

        // 导航栏占位
        if (this.currentMode !== ImmersiveMode.FULLSCREEN) {
          Row()
            .width('100%')
            .height(this.safeAreaInfo.navigationBarHeight)
            .backgroundColor('transparent')
        }
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }

  // 初始化沉浸式效果
  private async initializeImmersive() {
    if (this.windowStage) {
      await this.immersiveManager.initialize(this.windowStage)
      this.safeAreaInfo = this.immersiveManager.getSafeAreaInfo()
      
      this.immersiveManager.onWindowChange((mode) => {
        this.currentMode = mode
        this.safeAreaInfo = this.immersiveManager.getSafeAreaInfo()
      })
    }
  }

  // 切换沉浸式模式
  async switchMode(mode: ImmersiveMode): Promise<void> {
    const success = await this.immersiveManager.enterImmersiveMode(mode)
    if (success) {
      this.currentMode = mode
      this.safeAreaInfo = this.immersiveManager.getSafeAreaInfo()
    }
  }

  // 设置窗口舞台
  setWindowStage(windowStage: window.WindowStage): void {
    this.windowStage = windowStage
  }
}

动态沉浸式效果控制

动态沉浸式效果允许应用根据用户的操作和内容的变化实时调整沉浸式状态，提供更加智能和人性化的用户体验。

// 动态沉浸式控制器
@Component
struct DynamicImmersiveDemo {
  @State private immersiveManager: ImmersiveManager = new ImmersiveManager()
  @State private isVideoPlaying: boolean = false
  @State private isMenuVisible: boolean = false
  @State private autoHideTimer: number = -1
  @State private currentContent: ContentType = ContentType.NORMAL
  @State private userInteracting: boolean = false

  // 内容类型枚举
  enum ContentType {
    NORMAL = 'normal',
    VIDEO = 'video',
    GAME = 'game',
    READING = 'reading',
    GALLERY = 'gallery'
  }

  aboutToAppear() {
    this.initializeManager()
  }

  aboutToDisappear() {
    this.clearAutoHideTimer()
    this.immersiveManager.destroy()
  }

  build() {
    Stack() {
      // 主要内容区域
      Column() {
        this.buildContentArea()
      }
      .width('100%')
      .height('100%')
      .onClick(() => {
        this.handleUserInteraction()
      })

      // 控制菜单
      if (this.isMenuVisible) {
        this.buildControlMenu()
      }

      // 悬浮控制按钮
      this.buildFloatingControls()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#000000')
  }

  @Builder
  buildContentArea() {
    Column() {
      // 内容标题
      Text(this.getContentTitle())
        .fontSize(24)
        .fontColor('#ffffff')
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })

      // 根据内容类型显示不同内容
      switch (this.currentContent) {
        case ContentType.VIDEO:
          this.buildVideoContent()
          break
        case ContentType.GAME:
          this.buildGameContent()
          break
        case ContentType.READING:
          this.buildReadingContent()
          break
        case ContentType.GALLERY:
          this.buildGalleryContent()
          break
        default:
          this.buildNormalContent()
      }

      // 内容操作区域
      Row() {
        Button('视频模式')
          .backgroundColor('#FF6B6B')
          .fontColor('#ffffff')
          .onClick(() => this.switchContent(ContentType.VIDEO))
          .margin({ right: 10 })

        Button('游戏模式')
          .backgroundColor('#4ECDC4')
          .fontColor('#ffffff')
          .onClick(() => this.switchContent(ContentType.GAME))
          .margin({ right: 10 })

        Button('阅读模式')
          .backgroundColor('#45B7D1')
          .fontColor('#ffffff')
          .onClick(() => this.switchContent(ContentType.READING))
          .margin({ right: 10 })

        Button('图库模式')
          .backgroundColor('#96CEB4')
          .fontColor('#ffffff')
          .onClick(() => this.switchContent(ContentType.GALLERY))
      }
      .justifyContent(FlexAlign.Center)
      .margin({ top: 30 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }

  @Builder
  buildVideoContent() {
    Column() {
      // 模拟视频播放器
      Stack() {
        Rectangle()
          .width('90%')
          .height(200)
          .fill('#333333')
          .borderRadius(8)

        // 播放控制
        Row() {
          Button(this.isVideoPlaying ? '暂停' : '播放')
            .backgroundColor('#ffffff')
            .fontColor('#000000')
            .onClick(() => {
              this.toggleVideoPlayback()
            })
        }
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .height(220)

      Text('视频播放时自动进入全屏沉浸式模式')
        .fontSize(14)
        .fontColor('#cccccc')
        .margin({ top: 20 })
    }
  }

  @Builder
  buildGameContent() {
    Column() {
      // 模拟游戏界面
      Stack() {
        Rectangle()
          .width('95%')
          .height(300)
          .fill('#1a1a1a')
          .borderRadius(12)

        Column() {
          Text('游戏画面区域')
            .fontSize(18)
            .fontColor('#ffffff')
            .margin({ bottom: 20 })

          Row() {
            Circle({ width: 60, height: 60 })
              .fill('#FF6B6B')
              .margin({ right: 20 })

            Circle({ width: 60, height: 60 })
              .fill('#4ECDC4')
              .margin({ right: 20 })

            Circle({ width: 60, height: 60 })
              .fill('#45B7D1')
          }
        }
      }
      .width('100%')

      Text('游戏模式下隐藏所有系统UI')
        .fontSize(14)
        .fontColor('#cccccc')
        .margin({ top: 20 })
    }
  }

  @Builder
  buildReadingContent() {
    Column() {
      // 模拟阅读内容
      Scroll() {
        Column() {
          Text('第一章 沉浸式阅读体验')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor('#ffffff')
            .margin({ bottom: 15 })

          Text('在阅读模式下，应用会提供最佳的阅读体验。状态栏和导航栏会根据阅读进度自动隐藏或显示，确保用户能够专注于阅读内容，同时在需要时能够方便地进行操作。\n\n沉浸式阅读不仅仅是隐藏系统UI，更重要的是创造一个无干扰的阅读环境。通过合理的字体大小、行间距、背景色调配，以及智能的亮度调节，为用户提供舒适的长时间阅读体验。')
            .fontSize(16)
            .fontColor('#e0e0e0')
            .lineHeight(24)
        }
        .padding({ horizontal: 20 })
      }
      .width('90%')
      .height(250)
      .backgroundColor('#1a1a1a')
      .borderRadius(8)

      Text('阅读时自动调整沉浸式状态')
        .fontSize(14)
        .fontColor('#cccccc')
        .margin({ top: 20 })
    }
  }

  @Builder
  buildGalleryContent() {
    Column() {
      // 模拟图库
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6], (index: number) => {
          GridItem() {
            Rectangle()
              .width('100%')
              .height(80)
              .fill(this.getRandomColor(index))
              .borderRadius(6)
              .onClick(() => {
                this.enterFullScreenGallery()
              })
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(8)
      .rowsGap(8)
      .width('90%')
      .height(180)

      Text('点击图片进入全屏浏览模式')
        .fontSize(14)
        .fontColor('#cccccc')
        .margin({ top: 20 })
    }
  }

  @Builder
  buildNormalContent() {
    Column() {
      Text('普通内容展示')
        .fontSize(18)
        .fontColor('#ffffff')
        .margin({ bottom: 20 })

      Text('在普通模式下，系统UI正常显示，用户可以方便地进行各种操作。')
        .fontSize(14)
        .fontColor('#cccccc')
        .textAlign(TextAlign.Center)
        .width('80%')
    }
  }

  @Builder
  buildControlMenu() {
    Column() {
      Text('沉浸式控制')
        .fontSize(18)
        .fontColor('#ffffff')
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      Column() {
        Button('普通模式')
          .width('80%')
          .backgroundColor('#666666')
          .fontColor('#ffffff')
          .margin({ bottom: 10 })
          .onClick(() => this.switchImmersiveMode(ImmersiveMode.NORMAL))

        Button('沉浸式模式')
          .width('80%')
          .backgroundColor('#4ECDC4')
          .fontColor('#ffffff')
          .margin({ bottom: 10 })
          .onClick(() => this.switchImmersiveMode(ImmersiveMode.IMMERSIVE))

        Button('全屏模式')
          .width('80%')
          .backgroundColor('#FF6B6B')
          .fontColor('#ffffff')
          .margin({ bottom: 10 })
          .onClick(() => this.switchImmersiveMode(ImmersiveMode.FULLSCREEN))

        Button('悬浮模式')
          .width('80%')
          .backgroundColor('#96CEB4')
          .fontColor('#ffffff')
          .margin({ bottom: 20 })
          .onClick(() => this.switchImmersiveMode(ImmersiveMode.FLOATING))

        Button('关闭菜单')
          .width('80%')
          .backgroundColor('#999999')
          .fontColor('#ffffff')
          .onClick(() => {
            this.isMenuVisible = false
          })
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#80000000')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }

  @Builder
  buildFloatingControls() {
    Row() {
      Button('菜单')
        .width(60)
        .height(40)
        .backgroundColor('#80ffffff')
        .fontColor('#000000')
        .fontSize(12)
        .onClick(() => {
          this.isMenuVisible = !this.isMenuVisible
        })
    }
    .position({ x: 20, y: 100 })
  }

  // 初始化管理器
  private async initializeManager() {
    // 这里应该传入实际的windowStage
    // await this.immersiveManager.initialize(windowStage)
  }

  // 处理用户交互
  private handleUserInteraction() {
    this.userInteracting = true
    
    // 如果是视频或游戏模式，显示控制界面
    if (this.currentContent === ContentType.VIDEO || this.currentContent === ContentType.GAME) {
      this.showControlsTemporarily()
    }

    // 重置自动隐藏计时器
    this.resetAutoHideTimer()
  }

  // 临时显示控制界面
  private showControlsTemporarily() {
    // 临时退出全屏模式显示控制界面
    if (this.immersiveManager.getCurrentMode() === ImmersiveMode.FULLSCREEN) {
      this.immersiveManager.enterImmersiveMode(ImmersiveMode.IMMERSIVE)
    }

    // 3秒后自动隐藏
    this.clearAutoHideTimer()
    this.autoHideTimer = setTimeout(() => {
      this.hideControlsAutomatically()
    }, 3000)
  }

  // 自动隐藏控制界面
  private hideControlsAutomatically() {
    if (!this.userInteracting) {
      if (this.currentContent === ContentType.VIDEO && this.isVideoPlaying) {
        this.immersiveManager.enterImmersiveMode(ImmersiveMode.FULLSCREEN)
      } else if (this.currentContent === ContentType.GAME) {
        this.immersiveManager.enterImmersiveMode(ImmersiveMode.FULLSCREEN)
      }
    }
    this.userInteracting = false
  }

  // 重置自动隐藏计时器
  private resetAutoHideTimer() {
    this.clearAutoHideTimer()
    this.autoHideTimer = setTimeout(() => {
      this.userInteracting = false
    }, 5000)
  }

  // 清除自动隐藏计时器
  private clearAutoHideTimer() {
    if (this.autoHideTimer !== -1) {
      clearTimeout(this.autoHideTimer)
      this.autoHideTimer = -1
    }
  }

  // 切换内容类型
  private async switchContent(contentType: ContentType) {
    this.currentContent = contentType

    // 根据内容类型自动选择合适的沉浸式模式
    switch (contentType) {
      case ContentType.VIDEO:
        await this.immersiveManager.enterImmersiveMode(ImmersiveMode.IMMERSIVE)
        break
      case ContentType.GAME:
        await this.immersiveManager.enterImmersiveMode(ImmersiveMode.FULLSCREEN)
        break
      case ContentType.READING:
        await this.immersiveManager.enterImmersiveMode(ImmersiveMode.IMMERSIVE)
        break
      case ContentType.GALLERY:
        await this.immersiveManager.enterImmersiveMode(ImmersiveMode.NORMAL)
        break
      default:
        await this.immersiveManager.enterImmersiveMode(ImmersiveMode.NORMAL)
    }
  }

  // 切换沉浸式模式
  private async switchImmersiveMode(mode: ImmersiveMode) {
    await this.immersiveManager.enterImmersiveMode(mode)
    this.isMenuVisible = false
  }

  // 切换视频播放状态
  private toggleVideoPlayback() {
    this.isVideoPlaying = !this.isVideoPlaying
    
    if (this.isVideoPlaying) {
      // 播放时进入全屏模式
      this.immersiveManager.enterImmersiveMode(ImmersiveMode.FULLSCREEN)
    } else {
      // 暂停时退出全屏模式
      this.immersiveManager.enterImmersiveMode(ImmersiveMode.IMMERSIVE)
    }
  }

  // 进入全屏图库模式
  private enterFullScreenGallery() {
    this.immersiveManager.enterImmersiveMode(ImmersiveMode.FULLSCREEN)
    
    // 模拟图片浏览，5秒后自动退出全屏
    setTimeout(() => {
      this.immersiveManager.enterImmersiveMode(ImmersiveMode.NORMAL)
    }, 5000)
  }

  // 获取内容标题
  private getContentTitle(): string {
    switch (this.currentContent) {
      case ContentType.VIDEO:
        return '视频播放模式'
      case ContentType.GAME:
        return '游戏娱乐模式'
      case ContentType.READING:
        return '沉浸式阅读'
      case ContentType.GALLERY:
        return '图片浏览模式'
      default:
        return '沉浸式效果演示'
    }
  }

  // 获取随机颜色
  private getRandomColor(index: number): string {
    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD']
    return colors[index % colors.length]
  }
}

实际应用场景

视频播放应用

视频播放是沉浸式效果最典型的应用场景之一。在视频播放过程中，用户希望获得最大化的观看区域和最少的视觉干扰。沉浸式效果能够隐藏状态栏和导航栏，让视频内容占据整个屏幕，提供类似电影院的观看体验。

视频播放的沉浸式实现需要考虑用户的操作需求。当用户需要调整音量、快进快退、切换清晰度等操作时，系统UI需要临时显示。这种动态的显示和隐藏机制需要精确的时机控制，既要保证沉浸式体验，又要确保操作的便利性。

视频播放还需要考虑不同视频比例的适配问题。16:9、4:3、21:9等不同比例的视频在全屏播放时需要不同的处理策略。有些需要裁剪适配，有些需要留黑边显示。沉浸式效果的实现需要配合这些显示策略，确保最佳的观看效果。

游戏娱乐应用

游戏应用对沉浸式效果有着更高的要求。游戏过程中，任何系统UI的干扰都可能影响游戏体验和操作精度。因此，游戏应用通常需要完全隐藏系统UI，创造出完全沉浸的游戏环境。

游戏的沉浸式实现需要考虑不同类型游戏的特点。动作游戏需要完全的沉浸式体验，而策略游戏可能需要保留一些系统信息的显示。休闲游戏的沉浸式需求相对较低，而竞技游戏则需要最高级别的沉浸式效果。

游戏应用还需要处理游戏暂停和切换的场景。当游戏暂停或用户需要切换到其他应用时，沉浸式效果需要及时退出，恢复正常的系统UI显示。这种状态切换需要与游戏的生命周期管理紧密配合。

阅读类应用

阅读应用的沉浸式效果重点在于创造专注的阅读环境。通过减少视觉干扰，让用户能够更好地专注于文字内容。阅读的沉浸式效果通常采用渐进式的实现方式，根据用户的阅读行为动态调整。

阅读应用的沉浸式需要考虑长时间使用的舒适性。除了隐藏系统UI外，还需要优化背景色、字体大小、亮度等参数，为用户提供舒适的阅读体验。夜间模式下的沉浸式效果需要特别的优化，减少蓝光对眼睛的刺激。

阅读应用还需要支持快速的操作切换。用户在阅读过程中可能需要做笔记、查词典、调整设置等操作，沉浸式效果需要能够快速响应这些需求，在保持沉浸感的同时提供便利的操作体验。

性能优化与最佳实践

状态切换优化

沉浸式效果的状态切换是影响用户体验的关键因素。频繁或突兀的状态切换会让用户感到不适，因此需要优化切换的时机、速度和视觉效果。状态切换应该有适当的过渡动画，让用户能够感知到变化的过程。

状态切换的性能优化需要减少不必要的系统调用。应该缓存窗口属性和系统UI状态，避免重复的查询和设置操作。同时，可以使用防抖动机制，避免短时间内的多次切换请求。

状态切换还需要考虑异常情况的处理。当系统资源不足或权限受限时，状态切换可能失败。应用需要有适当的错误处理机制，确保在异常情况下仍能提供基本的功能。

兼容性处理

不同版本的鸿蒙系统和不同型号的设备对沉浸式效果的支持程度不同。应用需要进行兼容性检测，根据设备的能力选择合适的实现方案。对于不支持某些沉浸式特性的设备，需要提供降级方案。

兼容性处理还需要考虑用户设置的影响。一些用户可能禁用了全屏手势或修改了系统UI的行为，应用需要能够适应这些设置变化。可以通过监听系统设置变化来动态调整沉浸式效果的实现。

设备旋转和多窗口场景也是兼容性考虑的重点。在平板设备上，应用可能在分屏模式下运行，此时沉浸式效果的表现需要适应分屏的约束。横竖屏切换时，安全区域和系统UI的位置都会发生变化，需要及时更新布局参数。

用户体验优化

沉浸式效果的最终目标是提升用户体验，因此需要从用户的角度进行优化。应该提供用户控制选项，让用户能够根据个人喜好选择是否启用沉浸式效果。某些用户可能更喜欢传统的界面布局，强制的沉浸式效果可能会降低他们的使用体验。

用户体验优化还需要考虑可访问性需求。视力障碍用户可能依赖系统UI中的某些信息，完全隐藏系统UI可能会影响他们的使用。应该提供可访问性友好的沉浸式实现方案，或者在检测到可访问性需求时自动调整效果。

沉浸式效果的引导和说明也很重要。首次使用时，应该向用户说明沉浸式效果的特点和操作方法，帮助用户快速适应新的交互方式。可以通过新手引导、提示动画等方式来改善用户的学习体验。

总结

鸿蒙HarmonyOS的ArkTS沉浸式效果为现代移动应用提供了强大的视觉体验增强能力。通过精确的窗口模式控制、系统UI处理和安全区域适配，开发者能够创造出既美观又实用的沉浸式界面。这种技术不仅能够最大化屏幕空间的利用，还能为用户提供更加专注和沉浸的使用体验。

沉浸式效果的成功实现需要综合考虑技术实现、用户体验和兼容性等多个方面。开发者需要根据应用的特点和用户需求，选择合适的沉浸式策略和实现方案。通过动态的效果控制和智能的状态管理，可以在保证功能完整性的同时，提供卓越的视觉体验。

随着移动设备屏幕技术的不断发展和用户对视觉体验要求的提高，沉浸式效果将在移动应用开发中扮演越来越重要的角色。掌握沉浸式效果的设计和实现技巧，对于构建现代化、高品质的移动应用具有重要意义。