鸿蒙+next实现页签栏平板端适配

鸿蒙 next实现页签栏平板端适配

1.在应用启动时通过 updateBreakpoint获取当前窗口尺寸断点

// 根据当前窗口尺寸更新断点
  private updateBreakpoint(windowWidth: number): void {
    // 拿到当前窗口对象获取当前所在displayId 注释该代码原因: 会在真机平板中报错
    // let displayId = this.windowObj?.getWindowProperties().displayId
    try {
      // 将长度的单位由px换算为vp
      let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels

      console.log('run get windowWidthVp', windowWidthVp)
      let newBp: string = ''
      if (windowWidthVp < 600) {
        newBp = 'sm'
      } else if (windowWidthVp < 840) { // 840
        newBp = 'md'
      } else {
        newBp = 'lg'
      }

      if (this.curBp !== newBp) {
        this.curBp = newBp
        // 使用状态变量记录当前断点值
        AppStorage.setOrCreate('currentBreakpoint', this.curBp)
      }
    } catch (err) {
      console.log("getDisplayByIdSync failed err" + err.code)
    }
  }

2.实现通用的断点工具类

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

/**
 * 媒体查询(mediaquery)
 * 响应式设计的核心
 */
export class BreakPointType<T> {
  options: ESObject

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

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

3.实现手机端页签栏在底部,平板端页签栏在左边:

Tabs({
        barPosition: new BreakPointType({
          sm: BarPosition.End,
          md: BarPosition.End,
          lg: BarPosition.Start
        }).getValue(this.currentBreakpoint),
        index: 0,
        controller: this.controller
      }) {
        ForEach(tabbarList, (item: TabbarItem, index) => {
          TabContent() {
            if (Utils.isSoutiXiaApp()) {
              // 搜题侠
              this.questionsTabContent(index)
            } else {
              // 基础版
              this.defaultTabContent(index)
            }

          }.tabBar(this.TabBuilder(index))
        })
      }
      .scrollable(false)
      .backgroundColor($r('app.color.mainBgColor'))
      .vertical(new BreakPointType({ sm: false, md: false, lg: true }).getValue(this.currentBreakpoint))
      .barWidth(new BreakPointType({ sm: '100%', md: '100%', lg: Utils.getVp(94) }).getValue(this.currentBreakpoint))
      .barHeight(new BreakPointType({
        sm: Utils.getVp(94),
        md: Utils.getVp(94),
        lg: '100%'
      }).getValue(this.currentBreakpoint))
posted @   flfljh2024  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示