鸿蒙最全鸿蒙HarmonyOS实战-ArkUI组件（mediaquery）_鸿蒙mideaquery(1)，5214页PDF的进阶架构师学习笔记

本文链接：https://blog.csdn.net/2401_84862079/article/details/138813363

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

给条件监听句柄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的响应式设计。

类型	说明
screen	按屏幕相关参数进行媒体查询。

3.3 媒体逻辑操作

媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（, ）将其组合起来。

关键词	描述
and	将多个条件同时应用于同一条规则
or	将多个条件中的任一条件应用于规则
not	排除某些条件
only	指定当前规则应用于的设备类型
comma（,）	将不同的媒体查询组合在一起，使它们应用相同的规则

媒体范围操作符包括<=，>=，<，>用于比较媒体条件

运算符	含义	示例
<	小于	screen and (max-width: 768)
>	大于	screen and (min-width: 768)
<=	小于等于	screen and (max-height: 1024)
>=	大于等于	screen and (min-height: 1024)

3.4 媒体特征

媒体查询中的媒体特征是用来描述设备的特定属性，以便在不同的视口和屏幕大小下应用不同的样式。

类型	说明
height	应用页面可绘制区域的高度。
min-height	应用页面可绘制区域的最小高度。
max-height	应用页面可绘制区域的最大高度。
width	应用页面可绘制区域的宽度。
min-width	应用页面可绘制区域的最小宽度。
max-width	应用页面可绘制区域的最大宽度。
resolution	设备的分辨率，支持dpi，dppx和dpcm单位。其中：- dpi表示每英寸中物理像素个数，1dpi ≈ 0.39dpcm；- dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；- dppx表示每个px中的物理像素数（此单位按96px = 1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。
min-resolution	设备的最小分辨率。
max-resolution	设备的最大分辨率。
orientation	屏幕的方向。可选值：- orientation: portrait（设备竖屏）；- orientation: landscape（设备横屏）。
device-height	设备的高度。
min-device-height	设备的最小高度。
max-device-height	设备的最大高度。
device-width	设备的宽度。
device-type	设备的类型。可选值：default、tablet。
min-device-width	设备的最小宽度。
max-device-width	设备的最大宽度。
round-screen	屏幕类型，圆形屏幕为true，非圆形屏幕为false。
dark-mode	系统为深色模式时为true，否则为false。

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%’)
}
}