HarmonyOS实战开发-ArkUI组件(mediaquery)

31 篇文章 0 订阅
31 篇文章 0 订阅

一、mediaquery

1.概述

媒体查询(mediaquery)它允许根据设备的不同特性(如屏幕大小、屏幕方向、分辨率、颜色深度等)来动态地调整网页的样式和布局。

通过媒体查询,可以为不同的设备定义不同的样式规则,以适应不同的屏幕大小和分辨率。这样就可以实现响应式设计,使页面在不同设备上表现一致、完美。例如,可以通过媒体查询设置某些元素在手机屏幕上隐藏,而在电脑屏幕上显示等。

媒体查询作为响应式设计的核心,在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。

媒体查询常用于下面应用场景:

image.png

2.引入与使用流程

1、导入相关模块


`import mediaquery from '@ohos.mediaquery';` </pre>

2、通过matchMediaSync接口设置媒体查询条件,保存返回的条件监听句柄listener。例如监听横屏事件:


`let listener = mediaquery.matchMediaSync('(orientation: landscape)');` </pre>

给条件监听句柄listener绑定回调函数onPortrait,当listener检测设备状态变化时执行回调函数。在回调函数内,根据不同设备状态更改页面布局或者实现业务逻辑。


`onPortrait(mediaQueryResult) {
 if (mediaQueryResult.matches) {
 // do something here
 } else {
 // do something here
 }
}

listener.on('change', onPortrait);` </pre>

3.媒体查询条件

3.1 语法规则

`[media-type] [media-logic-operations] [(media-feature)]` </pre>

例如:screen and (device-type: tv) or (resolution < 2) :表示包含多个媒体特征的多条件复杂语句查询,当设备类型为tv或设备分辨率小于2时条件成立。

3.2 媒体类型

screen是一种媒体类型,用于匹配屏幕设备,包括计算机屏幕、移动设备屏幕和平板电脑等。在使用screen媒体类型时,可以为不同分辨率的屏幕应用不同的样式,从而优化UI的响应式设计。

image.png

3.3 媒体逻辑操作

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

image.png

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

image.png

3.4 媒体特征

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

image.png

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%')
 }
}` </pre>
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%')
 }
}` </pre>

image.png

image.png

写在最后

●如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
●点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
●关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
●更多鸿蒙最新技术知识点,请移步前往小编:https://gitee.com/

在这里插入图片描述

  • 22
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值