HarmonyOS鸿蒙Next第一课“营”在暑期：Codelabs挑战赛+音乐专辑

应用简介

本文是参加“【Codelabs挑战赛】<HarmonyOS第一课>秀出你的创意，赢取惊喜好礼！”活动写的一个应用介绍，活动地址：

https://developer.huawei.com/consumer/cn/forum/topic/0202126442505871313?fid=0101562279236410779

作品基于自适应布局和响应式布局，实现了一次开发，多端部署音乐专辑，并成功完成展现音乐列表页的实现。通过一套代码，最终编译出来的同一个应用就可以按不同的显示效果分别运行在手机、平板、折叠屏等设备上，这对开发者来说真是既高效又便捷。

由于个人目前还没有手机、平板、折叠屏这么全的真机和模拟器，即使官方的远程模拟器和远程真机也没能提供全部这些种类的设备，所以调试和预览都是在开发工具的预览窗口实现的。

效果预览

手机模式

折叠屏模式

平板模式

简要介绍

在音乐专辑这个示例中，我们实现一次开发，多端部署的目的，主要是采用了自适应布局和响应式布局的方法。

1. 自适应布局

自适应布局随着屏幕设备规格的变化，界面中所呈现的信息量有所增加，但信息架构不变。例子中我们有用到Flex、Column、Row、Blank、Scroll、List等，随着屏幕变大或变小，界面显示的内容条目与数量变多或变少，但还是按照之前的水平或者垂直的方式呈现给用户。

2. 响应式布局

响应式布局页面内的信息架构会随着设备屏幕规格的变化而发生变化。常见的就是GridRow和GridCol，它们也有很强的自适应能力，但在排版中有更强的响应能力。这种栅格布局不仅可以完成一对多布局的自动换行和自适应，还可以提供一种灵活的间距调整方法。

栅格的默认列数为12列，我们指定不同模式下组件占用的列数，就能让组件在不同大小的屏幕上达到自适应的目的。

栅格系统默认断点将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：

不同的设备属于哪一种类型，我们是按照设备屏幕宽度的vp值来区分的，具体计算方法如下：

vp=(width_px*160)/dpi

vp：是一台设备针对应用而言所具有的虚拟尺寸。

width_px：设备屏幕像素宽度，1px代表手机屏幕上的一个像素点。

dpi：代表屏幕像素密度。

音乐列表示例中，只用到了sm、md和lg三类，屏幕的大小按照宽度分为sm、md和lg三种断点模式。

手机属于sm模式

在sm模式下，音乐封面和音乐列表都占了12列，就代表占满了整屏宽，所以一行不可能放下，就正好上下排列。

折叠屏属于md模式

在md模式下，音乐封面占了6列，音乐列表占了6列，加在一起正好是12列，是一整行，所以它们左右排列，两个宽度相等。

平板属于lg模式

在lg模式下，音乐封面占了4列，音乐列表占了8列，音乐列表宽度是音乐封面的2倍，它们也是左右排列。

代码分析

1. 响应式布局的实现：

build() {
  GridRow() {
    GridCol({ span: { sm: 12, md: 6, lg: 4 } }) {
      PlayListCover()
        .onAreaChange((oldArea: Area, newArea: Area) => {
          this.coverHeight = newArea.height as number
        })
    }
    .backgroundColor('#e4ecf7')

    GridCol({ span: { sm: 12, md: 6, lg: 8 } }) {
      PlayList()
    }
    .borderRadius(40)
  }
  .layoutWeight('100')
}

我们为GridCol指定span参数，span是指占用列数，还有offset是指偏移列数。

2. 媒体查询模式

媒体查询是响应式设计的核心，在移动设备上可根据不同设备类型或同设备不同状态修改应用的样式，

我们通过matchMediaSync接口设置媒体查询条件，得到对应的currentBreakpoint 变量，然后根据变量设置对应的参数值。

private breakpointSystem: BreakpointSystem = new BreakpointSystem()
@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'

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

public register() {
  this.smListener = mediaQuery.matchMediaSync('(320vp<=width<600vp)')
  this.smListener.on('change', this.isBreakpointSM)
  this.mdListener = mediaQuery.matchMediaSync('(600vp<=width<840vp)')
  this.mdListener.on('change', this.isBreakpointMD)
  this.lgListener = mediaQuery.matchMediaSync('(840vp<=width)')
  this.lgListener.on('change', this.isBreakpointLG)
}

@Builder
CoverImage() {
  Stack({ alignContent: Alignment.BottomStart }) {
    Image($r('app.media.pic_album'))
      .width(this.currentBreakpoint == 'sm'? '120vp' : '270vp')
      .height(this.currentBreakpoint == 'sm'? '120vp' : '270vp')
      .borderRadius(8)
      .onAreaChange((oldArea: Area, newArea: Area) => {
        this.imgHeight = newArea.height as number
      })
    Text($r('app.string.collection_num'))
      .letterSpacing(1)
      .fontColor('#fff')
      .fontSize(this.fontSize - 4)
      .translate({ x: 10, y: '-100%' })
  }
}

总结

通过这次对音乐列表的学习，掌握了一次开发多端部署的方法，其中最主要的就是使用GridRow和GridCol布局组件，根据具体情况设置span参数，然后还可以配合媒体查询机制动态设置组件参数。