鸿蒙适配一多搭建首页框架

认识一多

随着终端设备形态日益多样化,分布式技术逐渐打破单一硬件边界,一个应用或服务,可以在不同的硬件设备之间随意调用、互助共享,让用户享受无缝的全场景体验。而作为应用开发者,广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容,则需要适配不同的屏幕尺寸和硬件,开发成本较高。HarmonyOS系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。 img

“一多”建议从最初的设计阶段开始就拉通多设备综合考虑。考虑实际智能终端设备种类繁多,设计师无法针对每种具体设备各自出一份UX设计图。“一多”建议从设备屏幕宽度的维度,将设备划分为六大类。设计师只需要针对这六大类设备做设计,而无需关心具体的设备形态。

设备类型 断点名称
超小设备 xs
小设备 sm
中设备 md
大设备 lg
特大设备 xl
超大设备 xxl

GridRow和Tab实现首页适配一多

首页我们一般使用Tab来布局,包含4到6个子页面,在中小屏手机上选项卡在底部,Tab使用上下排版,例如手机,折叠屏和竖向平板等等,但像横向平板和2in1设备采用上下排版就不合适了,推荐采用左右排版。Tab的vertical属性可以设置Tab是上下排版还是左右排版。

现在我们只需要判断出设备是中小屏还是大屏设备,系统给我们提供了GridRow栅格组件,我们在栅格组件的onBreakpointChange中可以获取到当前设备属于哪一种。具体实现如下

@ComponentV2
export struct HomePage {
  @Local breakPoint: string = 'unknown'
  @Local selectIndex: number = 0
  readonly items: TabItemBean[] = [
    { name: '推荐', icon: $r('sys.symbol.house') },
    { name: '体系', icon: $r('sys.symbol.puzzle') },
    { name: '导航', icon: $r('sys.symbol.paperplane') },
    { name: '项目', icon: $r('sys.symbol.square_grid_2x2') },
    { name: '我的', icon: $r('sys.symbol.person') }
  ]

  @Computed
  get isLg(): boolean {
    return this.breakPoint === 'lg'
  }

  @Builder
  tabItemBuilder(item: TabItemBean, index: number) {
    Column() {
      SymbolGlyph(item.icon)
        .fontSize(24)
        .fontColor([this.selectIndex === index ? $r('app.color.brand_color') : $r('app.color.dialog_content')])
      Text(item.name)
        .fontSize(14)
        .fontColor(this.selectIndex === index ? $r('app.color.brand_color') : $r('app.color.dialog_content'))
    }.onClick(() => {
      this.selectIndex = index
    })
  }

  build() {
    GridRow({
      columns: 1,
      breakpoints: { reference: BreakpointsReference.WindowSize }
    }) {
      GridCol() {
        Tabs({ index: $$this.selectIndex }) {
          Repeat<TabItemBean>(this.items).each((data: Readonly<RepeatItem<TabItemBean>>) => {
            TabContent() {
              Text(data.item.name)
            }.tabBar(this.tabItemBuilder(data.item, data.index))
          }).key((data: Readonly<TabItemBean>) => data.name)
        }
        .vertical(this.isLg)
        .barPosition(this.isLg ? BarPosition.Start : BarPosition.End)
      }
    }.width('100%')
    .height('100%')
    .onBreakpointChange((point) => {
      this.breakPoint = point
    })
  }
}

在中小屏设备上,Tab选项卡在底部,选项卡采用横向排版;在大屏设备上,Tab选项卡在左边,选项卡采用竖向排版,效果如图。 img2 img3

#鸿蒙#
全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务