鸿蒙应用开发中，如何封装媒体查询实现响应式布局？

【学习目标】 掌握 媒体查询的引入与Stage模型标准使用流程，理解监听句柄与生命周期管理 吃透 媒体查询完整语法规则：媒体类型、逻辑操作符、核心媒体特征 实现 横竖屏切换、深浅色模式跟随、多设备适配 三大高频响应式场景 封装 可跨页面复用的媒体查询工具类，一行代码实现状态监听 一、工程目录结构 MediaQueryDemo/ ├── entry/src/main/ets/ │ ├── utils/ │ │ └── MediaQueryUtil.ets // 媒体查询复用工具类 │ └── pages/ │ └── Index.ets // 综合示例与工具测试 └── resources/ // 工程原生资源目录 二、媒体查询核心基础 2.1 什么是媒体查询 媒体查询是鸿蒙响应式设计的核心能力，它可以根据设备的固有属性（设备类型、屏幕尺寸）、应用的实时状态（可绘制宽高、横竖屏方向）、系统配置（深浅色模式），动态修改应用的布局与样式，实现「一套代码，多设备适配」。 2.2 两大核心应用场景 静态适配：针对不同设备类型（手机/平板/车机/穿戴），预设匹配的布局规则 动态响应：监听设备状态实时变化（横竖屏切换、深浅色切换、分屏），同步更新页面布局 2.3 使用步骤 步骤1：导入媒体查询模块 import { mediaquery } from '@kit.ArkUI'; 步骤2：创建查询条件，获取监听句柄 通过 getUIContext().getMediaQuery().matchMediaSync() 接口设置查询条件，获取监听句柄 MediaQueryListener。 private listener: mediaquery.MediaQueryListener | null = null; aboutToAppear() { // 必须在aboutToAppear中初始化，确保UIContext已就绪 const mediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); } 步骤3：绑定回调函数，监听状态变化 给监听句柄绑定 on('change') 回调，当媒体特征发生变化时，会自动触发回调，通过 mediaQueryResult.matches 判断是否匹配查询条件。 aboutToAppear() { // 必须在aboutToAppear中初始化 监听屏幕方向 const mediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); this.listener = mediaQueryListener // 初始化时手动触发一次，获取初始状态 this.onOrientationChange(mediaQueryListener) // 绑定回调 this.listener.on('change', (result: mediaquery.MediaQueryResult) => { this.onOrientationChange(result); }); } onOrientationChange(mediaQueryResult: mediaquery.MediaQueryResult) { if (mediaQueryResult.matches) { console.info('当前为横屏状态'); // 横屏布局逻辑 } else { console.info('当前为竖屏状态'); // 竖屏布局逻辑 } } 步骤4：页面销毁时解绑回调，避免内存泄漏 必须在 aboutToDisappear 生命周期中解绑已注册的回调函数，否则会造成内存泄漏。