如何在应用内使用媒体查询进行布局

如何在应用内使用媒体查询进行布局

HarmonyOS
2024-07-31 10:36:30
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
droidzxy

媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。常用于下面两种场景:

  1. 针对设备和应用的属性信息(比如显示区域、深浅色、分辨率),设计出相匹配的布局。
  2. 当屏幕发生动态改变时(比如分屏、横竖屏切换),同步更新应用的页面布局。


媒体查询通过mediaquery模块接口,设置查询条件并绑定回调函数,在对应的条件的回调函数里更改页面布局或者实现业务逻辑,实现页面的响应式设计。

  1. ​首先导入媒体查询模块。

​import { mediaquery } from '@kit.ArkUI';

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

​let listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');

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

onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) {

 if (mediaQueryResult.matches as boolean) {

   // do something here

 } else {

   // do something here

 }

}

listener.on('change', onPortrait);

参考:

​​​​​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-media-query-V5​


分享
微博
QQ
微信
回复
2024-07-31 17:17:00
morning_dxm

使用Stage模型的示例如下:

import { mediaquery, window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct MediaQueryExample {
  @State color: string = '#DB7093';
  @State text: string = 'Portrait';
  @State portraitFunc:mediaquery.MediaQueryResult|void|null = null;
当设备横屏时条件成立
  listener:mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');

当满足媒体查询条件时,触发回调
  onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {
若设备为横屏状态,更改相应的页面布局
      this.color = '#FFD700';
      this.text = 'Landscape';
    } else {
      this.color = '#DB7093';
      this.text = 'Portrait';
    }
  }

  aboutToAppear() {
绑定当前应用实例
绑定回调函数
    this.listener.on('change', (mediaQueryResult:mediaquery.MediaQueryResult) => { this.onPortrait(mediaQueryResult) });
  }

改变设备横竖屏状态函数
  private changeOrientation(isLandscape: boolean) {
获取UIAbility实例的上下文信息
    let context:common.UIAbilityContext = 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%')
  }
}
分享
微博
QQ
微信
回复
2024-07-31 18:56:31
相关问题
举例说明媒体条件查询如何使用
357浏览 • 1回复 待解决