HarmonyOS BreakPointType怎么导入

HarmonyOS
2024-12-26 14:40:23
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

BreakPointType 这个是需要自行开发的一个类。这边提供了一个已经开发好的示例。可以参考。

响应式布局中的媒体查询

对通过媒体查询监听断点的功能做简单的封装,方便后续使用

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/responsive-layout-V5

参考demo:

// common/breakpointsystem.ets
import mediaQuery from '@ohos.mediaquery'

declare interface BreakPointTypeOption<T> {
  xs?: T
  sm?: T
  md?: T
  lg?: T
  xl?: T
  xxl?: T
}

export class BreakPointType<T> {
  options: BreakPointTypeOption<T>

  constructor(option: BreakPointTypeOption<T>) {
    this.options = option
  }

  getValue(currentBreakPoint: string) {
    if (currentBreakPoint === 'xs') {
      return this.options.xs
    } else if (currentBreakPoint === 'sm') {
      return this.options.sm
    } else if (currentBreakPoint === 'md') {
      return this.options.md
    } else if (currentBreakPoint === 'lg') {
      return this.options.lg
    } else if (currentBreakPoint === 'xl') {
      return this.options.xl
    } else if (currentBreakPoint === 'xxl') {
      return this.options.xxl
    } else {
      return undefined
    }
  }
}

interface Breakpoint {
  name: string
  size: number
  mediaQueryListener?: mediaQuery.MediaQueryListener
}

export class BreakpointSystem {
  private currentBreakpoint: string = 'md'
  private breakpoints: Breakpoint[] = [
    { name: 'xs', size: 0 }, { name: 'sm', size: 320 },
    { name: 'md', size: 600 }, { name: 'lg', size: 840 }
  ]

  private updateCurrentBreakpoint(breakpoint: string) {
    if (this.currentBreakpoint !== breakpoint) {
      this.currentBreakpoint = breakpoint
      AppStorage.Set<string>('currentBreakpoint', this.currentBreakpoint)
      console.log('on current breakpoint: ' + this.currentBreakpoint)
    }
  }

  public register() {
    this.breakpoints.forEach((breakpoint: Breakpoint, index) => {
      let condition:string
      if (index === this.breakpoints.length - 1) {
        condition = '(' + breakpoint.size + 'vp<=width' + ')'
      } else {
        condition = '(' + breakpoint.size + 'vp<=width<' + this.breakpoints[index + 1].size + 'vp)'
      }
      console.log(condition)
      breakpoint.mediaQueryListener = mediaQuery.matchMediaSync(condition)
      breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => {
        if (mediaQueryResult.matches) {
          this.updateCurrentBreakpoint(breakpoint.name)
        }
      })
    })
  }

  public unregister() {
    this.breakpoints.forEach((breakpoint: Breakpoint) => {
      if(breakpoint.mediaQueryListener){
        breakpoint.mediaQueryListener.off('change')
      }
    })
  }
}
分享
微博
QQ
微信
回复
2024-12-26 17:55:53
相关问题
HarmonyOS动态导入是否会重复导入?
609浏览 • 1回复 待解决
本地模拟器怎么导入媒体数据?
4974浏览 • 1回复 待解决
HarmonyOS 导入ComponentContent报错
420浏览 • 1回复 待解决
HarmonyOS mindspore库导入问题
695浏览 • 1回复 待解决
HarmonyOS import动态导入库失败
243浏览 • 1回复 待解决
HarmonyOS 使用agconnect需要导入什么包
349浏览 • 1回复 待解决
HarmonyOS 导入不同的包的区别
527浏览 • 1回复 待解决
HarmonyOS 能否支持3D模型导入
814浏览 • 0回复 待解决
HarmonyOS import动态导入绝对路径
602浏览 • 1回复 待解决
HarmonyOS 导入本地动态库报错9568305
1090浏览 • 1回复 待解决
DevEco Studio不能导入Module吗
7486浏览 • 2回复 待解决
Huks如何导入AES的密钥?
1129浏览 • 1回复 待解决
导入ohos相关模块都找不到
6737浏览 • 1回复 待解决
组合样式怎样去实现导入导出
2308浏览 • 1回复 待解决
HarmonyOS 加密导入RSA1024秘钥对Demo
458浏览 • 1回复 待解决