鸿蒙HarmonyOS实战-ArkUI组件（mediaquery）

🚀一、mediaquery 🔎1.概述 媒体查询（mediaquery）它允许根据设备的不同特性（如屏幕大小、屏幕方向、分辨率、颜色深度等）来动态地调整网页的样式和布局。 通过媒体查询，可以为不同的设备定义不同的样式规则，以适应不同的屏幕大小和分辨率。这样就可以实现响应式设计，使页面在不同设备上表现一致、完美。例如，可以通过媒体查询设置某些元素在手机屏幕上隐藏，而在电脑屏幕上显示等。 媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。 媒体查询常用于下面应用场景： 🔎2.引入与使用流程 1、导入相关模块 import mediaquery from '@ohos.mediaquery'; 2、通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener。例如监听横屏事件： let listener = mediaquery.matchMediaSync('(orientation: landscape)'); 给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑。 onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { // do something here } else { // do something here } } listener.on('change', onPortrait); 🔎3.媒体查询条件 🦋3.1 语法规则 [media-type] [media-logic-operations] [(media-feature)] 例如：screen and (device-type: tv) or (resolution < 2) ：表示包含多个媒体特征的多条件复杂语句查询，当设备类型为tv或设备分辨率小于2时条件成立。 🦋3.2 媒体类型 screen是一种媒体类型，用于匹配屏幕设备，包括计算机屏幕、移动设备屏幕和平板电脑等。在使用screen媒体类型时，可以为不同分辨率的屏幕应用不同的样式，从而优化UI的响应式设计。 🦋3.3 媒体逻辑操作 媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（, ）将其组合起来。 媒体范围操作符包括<=，>=，<，>用于比较媒体条件 🦋3.4 媒体特征 媒体查询中的媒体特征是用来描述设备的特定属性，以便在不同的视口和屏幕大小下应用不同的样式。 🔎4.案例 🦋4.1 Stage模型 import mediaquery from '@ohos.mediaquery'; import window from '@ohos.window'; import common from '@ohos.app.ability.common'; let portraitFunc = null; @Entry @Component struct MediaQueryExample { @State color: string = '#DB7093'; @State text: string = 'Portrait'; // 当设备横屏时条件成立 listener = mediaquery.matchMediaSync('(orientation: landscape)'); // 当满足媒体查询条件时，触发回调 onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { // 若设备为横屏状态，更改相应的页面布局 this.color = '#FFD700'; this.text = 'Landscape'; } else { this.color = '#DB7093'; this.text = 'Portrait'; } } aboutToAppear() { // 绑定当前应用实例 portraitFunc = this.onPortrait.bind(this); // 绑定回调函数 this.listener.on('change', portraitFunc); } // 改变设备横竖屏状态函数 private changeOrientation(isLandscape: boolean) { // 获取UIAbility实例的上下文信息 let context = getContext(this) as common.UIAbilityContext; // 调用该接口手动改变设备横竖屏状态 window.getLastWindow(context).then((lastWindow) => { lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT) }); } build() { Column({ space: 50 }) { Text(this.text).fontSize(50).fontColor(this.color) Text('Landscape').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { this.changeOrientation(true); }) Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { this.changeOrientation(false); }) } .width('100%').height('100%') } } 🦋4.2 FA模型 import mediaquery from '@ohos.mediaquery'; import featureAbility from '@ohos.ability.featureAbility'; let portraitFunc = null; @Entry @Component struct MediaQueryExample { @State color: string = '#DB7093'; @State text: string = 'Portrait'; listener = mediaquery.matchMediaSync('(orientation: landscape)'); // 当设备横屏时条件成立 onPortrait(mediaQueryResult) { // 当满足媒体查询条件时，触发回调 if (mediaQueryResult.matches) { // 若设备为横屏状态，更改相应的页面布局 this.color = '#FFD700'; this.text = 'Landscape'; } else { this.color = '#DB7093'; this.text = 'Portrait'; } } aboutToAppear() { portraitFunc = this.onPortrait.bind(this); // 绑定当前应用实例 this.listener.on('change', portraitFunc); //绑定回调函数 } build() { Column({ space: 50 }) { Text(this.text).fontSize(50).fontColor(this.color) Text('Landscape').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { let context = featureAbility.getContext(); context.setDisplayOrientation(0); //调用该接口手动改变设备横竖屏状态 }) Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { let context = featureAbility.getContext(); context.setDisplayOrientation(1); //调用该接口手动改变设备横竖屏状态 }) } .width('100%').height('100%') } } 🚀写在最后 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙： 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY