Harmonyos Next，一多开发之媒体查询

 媒体查询

媒体查询常用于下面两种场景：

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

核心用法

咱们分 2 个角度来看看如何使用媒体查询

1. 整合步骤

导入模块 ---> 创建监听器 ---> 注册监听器 ---> 移除监听器

     2.调整媒体查询条件

// 1. 导入 模块
import { mediaquery } from '@kit.ArkUI'

// 2. 创建监听器 
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)');
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)');

// 3. 注册监听器
// 组件即将创建出来
aboutToAppear(): void {
  // 添加回调函数
  listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
    console.log('changeRes:', JSON.stringify(res))
    // 执行逻辑
  })
  listenerSM.on('change', (res: mediaquery.MediaQueryResult) => {
    console.log('changeRes:', JSON.stringify(res))
    // 执行逻辑
  })
}

// 4. 移除监听器
// 即将销毁
aboutToDisappear(): void {
  // 移除监听 避免性能浪费
  listenerXS.off('change')
  listenerSM.off('change')
}

 使用查询结果

上面的内容只在当前页面可以使用，如果希望应用中任意位置都可以使用，咱们可以使用AppStorage 进行共享

核心步骤：

1. 事件中通过 AppStorage.set(key,value)的方式保存当前断点值
2. 需要使用的位置通过 AppStorage 来获取即可

保存断点值

// 添加回调函数
listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
  console.log('changeRes:', JSON.stringify(res))
  if (res.matches == true) {
    // this.currentBreakpoint = 'xs'
    AppStorage.set('currentBreakpoint', 'xs')
  }
})

使用断点值

// 组件中引入 AppStorage
@StorageProp('currentBreakpoint') currentBreakpoint: CurrentBreakpoint = 'xs'

// 在需要的位置使用 AppStorage 中保存的断点值
Text(this.currentBreakpoint)

以下是参考文档，写的增加深色模式查询

媒体查询通过mediaquery模块接口，设置查询条件并绑定回调函数，任一媒体特征改变时，均会触发回调函数，返回匹配结果，根据返回值更改页面布局或者实现业务逻辑，实现页面的响应式设计。

深色模式查询

// 1. 引入模块
import { mediaquery } from '@kit.ArkUI'

// 2. 创建监听器
const listenerDark: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(dark-mode: true)')

@Entry
@Component
struct Demo09 {
  @State message: string = '';

  aboutToAppear(): void {
    // 3. 注册监听器
    listenerDark.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('深色模式', JSON.stringify(res))
      this.message = res.matches ? '深色模式' : '亮色模式'
    })
  }

  // 4. 移除监听器
  aboutToDisappear(): void {
    listenerDark.off('change')
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Demo09HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}