ArkTS 如何适配手机和平板，展示不同的 Tabs 页签

原创

我的代码呢 2024-10-30 15:22:36 ©著作权

文章标签 智能手机电脑屏幕尺寸响应式设计开发者 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者我的代码呢的原创作品，请联系作者获取转载授权，否则将追究法律责任

ArkTS（Ark TypeScript）作为HarmonyOS应用开发的主要语言，提供了丰富的组件和接口来适配不同设备，包括手机和平板。在展示不同的Tabs页签以适应手机和平板时，ArkTS主要依赖于布局和组件的灵活性，以及响应式设计的概念。以下是一些关键的步骤和考虑因素：

1. 使用断点系统（Breakpoint System）

HarmonyOS提供了断点系统，允许开发者根据设备的屏幕尺寸来应用不同的样式和布局。通过断点系统，可以识别设备类型（如手机、平板）并据此调整Tabs页签的布局。

设置断点：在ArkTS中，可以使用BreakpointSystem类来注册和监听断点变化。根据设备的屏幕尺寸，可以设置不同的断点，如小屏（手机）、大屏（平板）等。
响应断点：根据当前断点，调整Tabs页签的布局属性，如位置（顶部、底部、侧边）、宽度、高度等。

2. 自定义Tabs组件

ArkTS允许开发者自定义Tabs组件，以适应不同的设备类型。

设置Tabs属性：使用Tabs组件时，可以通过barPosition属性设置页签的位置（顶部、底部），通过vertical属性设置页签的排列方向（横向、纵向）。
响应式设计：在Tabs组件的build方法中，可以根据断点系统的返回值动态设置Tabs的属性，以实现响应式设计。

3. 编写条件渲染逻辑

根据设备的屏幕尺寸或断点状态，编写条件渲染逻辑，以决定展示哪种Tabs布局。

使用if/else语句：在组件的build方法中，使用if/else语句或类似的逻辑判断语句，根据断点系统的返回值来渲染不同的Tabs布局。
动态样式：使用ArkTS的样式绑定功能，根据设备的屏幕尺寸动态调整Tabs组件的样式属性。

4. 示例代码

以下是一个简化的示例代码，展示了如何使用ArkTS的断点系统和Tabs组件来适配手机和平板。

import { BreakpointSystem, BreakpointConstants } from '@ohos/common';

@Entry
@Component
struct TabsDemo {
  @State currentPageIndex: number = 0;
  private breakpointSystem: BreakpointSystem = new BreakpointSystem();

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

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

  build() {
    let barPosition = this.breakpointSystem.getCurrentBreakpoint() === BreakpointConstants.BREAKPOINT_LG ?
      BarPosition.End : BarPosition.Start;

    Column() {
      Tabs({ barPosition: barPosition, index: this.currentPageIndex, onChange: (index: number) => {
        this.currentPageIndex = index;
      }}) {
        // 假设有多个TabContent组件
        TabContent() { /* 第一个页面的内容 */ }.tabBar('第一个标签')
        TabContent() { /* 第二个页面的内容 */ }.tabBar('第二个标签')
        // ... 其他TabContent组件
      }
      // ... 其他布局元素
    }
  }
}

注意：上述代码是一个简化的示例，用于说明如何根据断点系统的返回值来设置Tabs组件的barPosition属性。在实际应用中，可能需要根据具体需求进行更多的自定义和逻辑处理。

5. 断点配置@ohos/common代码

import { mediaquery } from '@kit.ArkUI';
import { BreakpointConstants } from '../constants/BreakpointConstants';


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

export class BreakPointType<T> {
  options: BreakPointTypeOption<T>

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

  getValue(currentBreakPoint: string): T {
    if (this.options.sm !== undefined && currentBreakPoint === 'sm') {
      return this.options.sm as T;
    }
    if (this.options.md && currentBreakPoint === 'md') {
      return this.options.md as T;
    } else {
      return this.options.lg as T;
    }
  }
}

export class BreakpointSystem {
  private currentBreakpoint: string = '';
  private smListener?: mediaquery.MediaQueryListener;
  private mdListener?: mediaquery.MediaQueryListener;
  private lgListener?: mediaquery.MediaQueryListener;

  private updateCurrentBreakpoint(breakpoint: string) {
    if (this.currentBreakpoint !== breakpoint) {
      this.currentBreakpoint = breakpoint;
      AppStorage.set<string>(BreakpointConstants.CURRENT_BREAKPOINT, this.currentBreakpoint);
    }
  }

  private isBreakpointSM = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    if (mediaQueryResult.matches) {
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_SM);
    }
  }

  private isBreakpointMD = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    if (mediaQueryResult.matches) {
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_MD);
    }
  }

  private isBreakpointLG = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    if (mediaQueryResult.matches) {
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_LG);
    }
  }

  public register() {
    this.smListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_SM);
    this.smListener.on('change', this.isBreakpointSM);
    this.mdListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_MD);
    this.mdListener.on('change', this.isBreakpointMD);
    this.lgListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_LG);
    this.lgListener.on('change', this.isBreakpointLG);
  }

  public unregister() {
    this.smListener?.off('change', this.isBreakpointSM);
    this.mdListener?.off('change', this.isBreakpointMD);
    this.lgListener?.off('change', this.isBreakpointLG);
  }
}