HarmonyOS实现Tabs

多喜乐长安宁

已于 2024-01-03 15:19:27 修改

阅读量718

点赞数 5

分类专栏： HarmonyOS 文章标签： harmonyos 华为

于 2023-12-28 09:19:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_57952018/article/details/135260676

版权

HarmonyOS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在HarmonyOS应用中使用代码实现动态布局，通过BreakpointSystem管理不同屏幕尺寸的样式变化，以及在Entry组件中处理组件显示逻辑，确保在不同屏幕尺寸下提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、代码

pages新建Home.ets

// 计算排列方式
import { BreakPointType, BreakpointSystem } from '../common/BreakpointSystem'
import  { HomeIndex } from './HomeComponents/Index'
import  { MyIndex } from './HomeComponents/MyIndex'
@Entry
@Component
struct Home {
  @State currentTabIndex: number = 0
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'
  private breakpointSystem: BreakpointSystem = new BreakpointSystem()
  aboutToAppear() {
    this.breakpointSystem.register()
  }
  aboutToDisappear() {
    this.breakpointSystem.unregister()
  }
  @Builder
  // 下方每个tabs的样式
  bottomBarItemBuilder(name: string, icon: Resource, index: number) {
    Flex({
      direction: new BreakPointType({
        sm: FlexDirection.Column,
        md: FlexDirection.Row,
        lg: FlexDirection.Column
      }).getValue(this.currentBreakpoint),
      justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center
    }) {
      Image(icon)
        .height(24)
        .width(24)
        .fillColor(this.getTabBarColor(index))
      Text(name)
        .margin(new BreakPointType<Padding>({
          sm: { top: 4 },
          md: { left: 8 },
          lg: { top: 4 }
        }).getValue(this.currentBreakpoint) as Padding)
        .fontSize(11)
        .fontColor(this.getTabBarColor(index))
    }
  }
  build() {
    Tabs({
      barPosition: new BreakPointType({ // 计算排列方式
        sm: BarPosition.End,
        md: BarPosition.End,
        lg: BarPosition.Start
      }).getValue(this.currentBreakpoint)
    }) {
      TabContent() {
        // 不写判断的话 HomeIndex和MyIndex里面的生命周期aboutToAppear都会执行 会导致一次掉很多的接口
        if (this.currentTabIndex === 0) {
          HomeIndex()
        }
      }.tabBar(this.bottomBarItemBuilder('首页', $r("app.media.ic_bottom_home"), 0))

      TabContent() {
        if (this.currentTabIndex === 1) {
          MyIndex()
        }
      }.tabBar(this.bottomBarItemBuilder('我的', $r("app.media.ic_bottom_record"), 1))
    }
    .vertical(new BreakPointType({ sm: false, md: false, lg: true }).getValue(this.currentBreakpoint) as boolean)
    .barWidth(new BreakPointType({ sm: '100%', md: '100%', lg: '56vp' }).getValue(this.currentBreakpoint) as string)
    .barHeight(new BreakPointType({ sm: '56vp', md: '56vp', lg: '60%' }).getValue(this.currentBreakpoint) as string)
    .animationDuration(0)
    .onChange((index) => {
      this.currentTabIndex = index
    })
  }
  private getTabBarColor(index: number) {
    return this.currentTabIndex == index ? '#73CD57' : '#999999';
  }
}

ets下新建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
    }
  }
}

class Breakpoint {
  name: string = '';
  size: number = 0;
  mediaQueryListener?: mediaQuery.MediaQueryListener
}

export class BreakpointSystem {
  private currentBreakpoint: string = 'md'
  private breakpoints: Breakpoint[] = [{ name: 'xs', size: 0 }, { name: 'sm', size: 320 },
    { name: 'md', size: 520 }, { 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')
      }
    })
  }
}