【鸿蒙开发实战】HarmonyOS封装响应式断点查询工具

鸿蒙响应式设计系统

最新推荐文章于 2025-11-25 07:23:10 发布

原创

最新推荐文章于 2025-11-25 07:23:10 发布 · 427 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙 #鸿蒙开发

介绍

我们可以根据断点系统查询到不同的断点值，设置不同的响应式设置

定义全局变量

定义常量

export const BreakpointKey='breakPointKey'

使用AppStore存储全局变量

const res=AppStorage.Set<string>(BreakpointKey,this.currentBreakpoint)

定义响应式类型

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

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
    } e