HarmonyOS 多设备短视频开发 ： 10 @ObservedV2 状态管理在短视频应用中的实践

10 ObservedV2 状态管理在短视频应用中的实践一、引言HarmonyOS ArkUI V2 引入了ObservedV2、Trace、Monitor等装饰器构建了新一代响应式状态管理体系。本文分析多设备短视频项目中如何利用这些装饰器实现高效的跨组件状态管理。二、装饰器体系概览装饰器作用范围用途示例ObservedV2类标记类为可观察对象ObservedV2 class WindowInfoTrace类属性标记属性为可观察Trace public widthBp: WidthBreakpointComponentV2组件标记组件使用 V2 状态管理ComponentV2 export struct AdaptiveVideoLocal组件属性本地响应式状态Local showComment: boolean falseParam组件属性父组件传入的参数Param currentSource: stringEvent组件属性回调事件Event onStateNotify: (state) voidMonitor方法监听属性变化Monitor(currentIndex) onIndexChange()Provider组件属性提供共享状态Provider(pathStack) pathStackConsumer组件属性消费共享状态Consumer(showSideComment) showSideCommentRequire组件属性标记必填参数Require Param data: MSVDataModel[]BuilderParam组件属性Builder 插槽BuilderParam content: BuilderCallback三、状态管理架构3.1 全局状态AppStorageV2窗口信息通过AppStorageV2实现跨页面共享ObservedV2 export class WindowInfo { Trace public widthBp: WidthBreakpoint WidthBreakpoint.WIDTH_XS; Trace public windowSize: window.Size { width: 0, height: 0 }; Trace public statusBarTopVp: number 0; Trace public navigationBarBottomVp: number 0; // ... } export function getWindowInfoState(): WindowInfo { return AppStorageV2.connectWindowInfo( WindowInfo, WINDOW_INFO_STORAGE_KEY, () new WindowInfo() )!; }任何组件通过Local windowInfo: WindowInfo getWindowInfoState()获取全局窗口状态且当WindowInfo中任意Trace属性变化时自动刷新 UI。3.2 组件树状态Provider/Consumer根组件提供共享状态子组件按需消费Index.ets (Provider) ├── Provider pathStack: NavPathStack ├── Provider showSideComment: boolean ├── Provider showSideIndividual: boolean ├── Provider isDark: boolean ├── Provider subTabIndex: number ├── Provider holdingHandStatus: HoldingHandStatus │ ├── AdaptiveVideo.ets (Consumer) │ ├── Consumer showSideComment │ ├── Consumer showSideIndividual │ ├── Consumer pathStack │ ├── Provider duration │ ├── Provider currentTime │ └── Provider windowSizeWidth / windowSizeHeight │ ├── AdaptiveAVPlayer.ets (Consumer) │ ├── Consumer currentTime │ ├── Consumer duration │ └── Consumer windowSizeWidth / windowSizeHeight │ ├── IndividualByRouter.ets (Consumer) │ ├── Consumer pathStack │ └── Consumer showSideIndividual │ └── SplitComment.ets (Consumer) ├── Consumer showSideComment ├── Consumer pathStack └── Provider commentCount3.3 组件内部状态Local每个组件维护自己的 UI 状态// AdaptiveVideo.ets Local curIndex: number 0; Local angle: number 0; Local showComment: boolean false; Local currentState: media.AVPlayerState idle; Local isSeeking: boolean false; Local seekToTime: number -1; Local progressBarWidth: number 0;四、Monitor 响应式监听Monitor装饰器是 V2 的核心能力自动监听指定属性的变化并执行回调// 监听当前视频索引变化控制播放/暂停 Monitor(currentIndex) onIndexChange() { if (this.currentIndex ! this.index) { this.avPlayer?.pause(); } else { this.changePortraitVideo(); if (this.hasPrepared) this.avPlayer?.play(); else this.initAVPlayer(); } } // 监听窗口尺寸变化重新计算视频沉浸式布局 Monitor(windowSizeWidth, windowSizeHeight) onWindowSizeChange() { this.changePortraitVideo(); } // 监听进度条拖拽 Monitor(seekToTime) onSeekToTimeChange() { if (this.seekToTime 0 this.avPlayer this.canSeek()) { this.avPlayer.seek(Math.floor(this.seekToTime), SeekMode.SEEK_CLOSEST); } }五、Event 回调机制Event用于子组件向父组件通信// 子组件定义事件 Event onStateNotify: (state: media.AVPlayerState) void () {}; // 子组件触发 this.onStateNotify(state); // 父组件传入回调 AdaptiveAVPlayer({ onStateNotify: (state: media.AVPlayerState) { this.currentState state; } })六、Param 参数传递父组件通过Param向子组件传递数据支持Require标记必填参数// 子组件 Require Param data: MSVDataModel[]; Param index: number 0; Param useFloating: boolean true; // 父组件使用 MSVTabs({ data: this.data, index: 0, useFloating: false })七、数据流总结AppStorageV2 (全局) ──→ WindowInfo (窗口状态) │ ▼ Provider (根组件) ──→ pathStack, showSideComment, isDark, ... │ ▼ Consumer (子组件) ──→ 消费共享状态 │ ▼ Local (组件内部) ──→ UI 状态 │ ▼ Monitor ──→ 响应式监听执行业务逻辑 │ ▼ Event ──→ 子→父 回调通知八、最佳实践全局状态最小化只将真正需要跨组件共享的状态放入AppStorageV2或ProviderLocal 优先组件内部状态优先使用Local避免过度共享Monitor 代替手动监听利用Monitor自动监听属性变化减少手动事件注册和清理Event 代替回调参数子组件向父组件通信使用Event保持类型安全避免循环依赖Provider/Consumer的 key 值命名要全局唯一避免命名冲突