HarmonyOS 鸿蒙Next<第一课>“营”在暑期：Codelabs挑战赛+音乐专辑】 基于自适应布局和响应式布局的多端部署开发

HarmonyOS 鸿蒙Next<第一课>“营”在暑期：Codelabs挑战赛+音乐专辑】 基于自适应布局和响应式布局的多端部署开发 1 作品展示

2 开发工具

• 工具：devstudio3.1 release
• 模型：stage
• 语言：ArkTS
• sdk：API9

3 自适应式布局和响应式布局

• 自适应式布局主要依赖多态组件能力，有拉伸、均分、占比、缩放、延伸、隐藏和折行。主要有list组件、image组件、text组件、blank组件等。

Stack() {
  Image(item.icon)
    .width(StyleConstants.FULL_WIDTH)
    .height($r('app.float.item_height'))
    .borderRadius($r('app.float.item_border_radius'))
  Column() {
    Text(item.title)
      .fontSize($r('app.float.title_font_size'))
      .fontColor(Color.White)
    Text(item.description)
      .fontSize($r('app.float.description_font_size'))
      .opacity(HomeConstants.TEXT_OPACITY)
      .fontColor(Color.White)
      .margin({
        top: $r('app.float.description_margin_top')
      })
    Blank()
    Column() {
      Button() {
        Text(item.button)
          .fontSize($r('app.float.button_font_size'))
          .fontColor(Color.White)
      }
      .backgroundColor($r('app.color.button_background_color'))
      .borderRadius($r('app.float.button_border_radius'))
      .width($r('app.float.button_width'))
      .height($r('app.float.button_height'))
      .onClick(() => {
        router.pushUrl({
          url: item.url
        }, router.RouterMode.Single);
      })
    }
    .alignItems(HorizontalAlign.End)
    .width(StyleConstants.FULL_WIDTH)
  }
  .width(StyleConstants.FULL_WIDTH)
  .height($r('app.float.item_height'))
  .borderRadius($r('app.float.item_border_radius'))
  .padding($r('app.float.item_padding'))
  .alignItems(HorizontalAlign.Start)
  .justifyContent(FlexAlign.SpaceBetween)
}

响应式布局采用断点、媒体查询和栅格方式进行布局。主要根据显示尺寸划分成不同的大小区域设计显示，然后根据媒体查询确定设备的显示效果。

GridRow({
  breakpoints: {
    value: BreakpointConstants.BREAKPOINT_VALUE,
    reference: BreakpointsReference.WindowSize
  },
  columns: {
    sm: BreakpointConstants.COLUMN_SM,
    md: BreakpointConstants.COLUMN_MD,
    lg: BreakpointConstants.COLUMN_LG
  },
  gutter: { x: BreakpointConstants.GUTTER_X },
  direction: GridRowDirection.Row
}) {
  GridCol({
    span: {
      sm: BreakpointConstants.SPAN_SM,
      md: BreakpointConstants.SPAN_MD,
      lg: BreakpointConstants.SPAN_LG
    },
    offset: {
      md: BreakpointConstants.OFFSET_MD,
      lg: BreakpointConstants.OFFSET_LG
    }
  })

4 多端部署设计

• 多端部署有归一化打包和分类打包两种方式。归一化打包模式指对于泛类采用打一个包的模式部署，即对不同的设备用同一个包进行部署；分类打包指根据设备类的能力分别打包，可以通过对设备能力的检测对功能代码进行裁剪以生成不同要求的应用包。
• 本应用采用归一化的打包方式，可以把同一个应用包部署到不同的设备上。

5 其他

• 由于API9的设备较少，因此展示采用了横竖屏的方式展示。