HarmonyOS 多端部署时,BreakpointSystem, BreakPointType找不到呢

用例文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/typical-layout-scenario-V5#%E7%BD%91%E6%A0%BC

看文档中引用是:import { BreakpointSystem, BreakPointType } from ‘…/common/breakpointsystem’找不到相关类,麻烦看看。

HarmonyOS
18h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

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
微信
回复
16h前
相关问题
有没有一次编译,多端部署的资料
366浏览 • 1回复 待解决
HarmonyOS 找不到对应组件
260浏览 • 1回复 待解决
HarmonyOS 找不到GestureRecognizer类
22浏览 • 1回复 待解决
HarmonyOS 引用找不到方法
245浏览 • 1回复 待解决
根据一次开发多端部署开发短信页面
1228浏览 • 1回复 待解决
HarmonyOS version-name找不到
396浏览 • 1回复 待解决
Harmony找不到HCI日志
2625浏览 • 1回复 待解决
HarmonyOS 找不到崩溃日志问题
256浏览 • 1回复 待解决
HarmonyOS IDE hvigor缓存找不到
92浏览 • 1回复 待解决
HarmonyOS 企业管理菜单找不到
31浏览 • 1回复 待解决
找不到图片和布局资源
12119浏览 • 8回复 待解决
HarmonyOS 录像后,图库里找不到视频
38浏览 • 1回复 待解决
HarmonyOS DevTools调试网页中找不到设备
536浏览 • 1回复 待解决
HarmonyOS app Crash但是找不到错误原因
52浏览 • 1回复 待解决
HarmonyOS 依赖自己编译的so,找不到
0浏览 • 1回复 待解决
导入ohos相关模块都找不到
6323浏览 • 1回复 待解决
为什么找不到 @arkui-x.bridge?
910浏览 • 1回复 待解决