鸿蒙一次开发，多端部署，响应式布局

鸿蒙一次开发，多端部署，响应式布局

一、定义屏幕相关常量

BreakpointConstants.ets

import BreakpointType from '../bean/BreakpointType'
export default class BreakPointConstants{
  /**
   * 小屏幕设备的Breakpoints 标记
   */
  static readonly BREAKPOINT_SM:string = 'sm'
  /**
   * 中等屏幕设备的Breakpoints 标记
   */
  static readonly BREAKPOINT_MD:string = 'md'
  /**
   * 大屏幕设备的Breakpoints 标记
   */
  static readonly BREAKPOINT_LG:string = 'lg'
  /**
   * 当前设备的breakpoints 存储key
   */
  static readonly CURRENT_BREAKPOINT:string = 'currentBreakpoint'

  /**
   * 小屏幕设备宽度范围
   */
  static readonly RANGE_SM:string = '(320vp<=width<600vp)'

  /**
   * 中屏幕设备宽度范围
   */
  static readonly RANGE_MD:string = '(600vp<width<840vp)'
  /**
   * 小屏幕设备宽度范围
   */
  static readonly RANGE_LG:string = '(840vp<=width)'

  static  readonly  BAR_POSITION:BreakpointType<BarPosition> = new BreakpointType({
    sm: BarPosition.End,
    md: BarPosition.Start,
    lg: BarPosition.Start
  })
}

二、封装媒体查询

BreakpointSystem.ets

import mediaQuery from '@ohos.mediaquery';
import BreakPointConstants from '../constants/BreakpointConstants';

export default class BreakpointSystem {
  private smListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakPointConstants.RANGE_SM)
  private mdListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakPointConstants.RANGE_MD)
  private lgListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakPointConstants.RANGE_LG)

  smListenerCallback(result: mediaQuery.MediaQueryResult) {
    if (result.matches) {
      this.updateCurrentBreakpoint(BreakPointConstants.BREAKPOINT_SM)
    }
  }

  mdListenerCallback(result: mediaQuery.MediaQueryResult) {
    if (result.matches) {
      this.updateCurrentBreakpoint(BreakPointConstants.BREAKPOINT_MD)
    }
  }

  lgListenerCallback(result: mediaQuery.MediaQueryResult) {
    if (result.matches) {
      this.updateCurrentBreakpoint(BreakPointConstants.BREAKPOINT_LG)
    }
  }

  updateCurrentBreakpoint(breakpoint: string) {
    AppStorage.SetOrCreate(BreakPointConstants.CURRENT_BREAKPOINT, breakpoint)
  }

  register() {
    this.smListener.on('change', this.smListenerCallback.bind(this))
    this.mdListener.on('change', this.mdListenerCallback.bind(this))
    this.lgListener.on('change', this.lgListenerCallback.bind(this))
  }

  unregister() {
    this.smListener.off('change', this.smListenerCallback.bind(this))
    this.mdListener.off('change', this.mdListenerCallback.bind(this))
    this.lgListener.off('change', this.lgListenerCallback.bind(this))
  }
}

三、定义泛型以及使用

1.泛型工具

declare interface BreakpointTypeOptions<T>{
  sm?:T,
  md?:T,
  lg?:T
}

export default class BreakpointType<T>{
  options:BreakpointTypeOptions<T>

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

  getValue(breakpoint:string):T{
    return this.options[breakpoint]
  }
}

2.使用

import BreakpointType from '../common/bean/BreakpointType'
import BreakPointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private breakpointSystem: BreakpointSystem = new BreakpointSystem()
  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakPointConstants.BREAKPOINT_SM

  @Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {
    Column({ space: CommonConstants.SPACE_8 }) {
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }

  aboutToAppear() {
    this.breakpointSystem.register()
  }

  aboutToDisappear() {
    this.breakpointSystem.unregister()
  }

  selectColor(index: number) {
    return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
  }


  build() {
    Tabs({ barPosition: BreakPointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }) {
      TabContent() {
        RecordIndex()
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'), $r('app.media.ic_calendar'), 0))

      TabContent() {
        Text('发现页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'), $r('app.media.discover'), 1))

      TabContent() {
        Text('我的页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'), $r('app.media.ic_user_portrait'), 2))
    }
    .width('100%')
    .height('100%')
    .onChange((index) => {
      this.currentIndex = index
    })
    // .vertical({sm:false,md:true,lg:true}[this.currentBreakpoint])
    .vertical(new BreakpointType({ sm: false, md: true, lg: true }).getValue(this.currentBreakpoint))
  }
}

原文地址：https://blog.csdn.net/weixin_38644630/article/details/144040802

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！