鸿蒙多设备适配最佳实践

📅 2025-05-15 · ⏱ 20 分钟 · 进阶

HarmonyOS 的核心理念之一是"一次开发，多端部署"。本文介绍如何让你的应用在手机、平板、智慧屏等不同设备上都有良好的用户体验。

一、断点系统

HarmonyOS 提供断点（Breakpoint）机制，根据屏幕宽度自动切换布局策略：

断点屏幕宽度典型设备
sm0 - 320vp小屏手机、折叠屏外屏
md320 - 600vp普通手机
lg600 - 840vp折叠屏展开、小平板
xl840vp+平板、智慧屏

获取当前断点

@StorageProp("breakpoint") currentBreakpoint: string = "md"

build() {
  Column() {
    if (this.currentBreakpoint === "md" || this.currentBreakpoint === "sm") {
      // 手机布局：单列
      this.MobileLayout()
    } else {
      // 平板布局：双列
      this.TabletLayout()
    }
  }
}

二、栅格布局

鸿蒙栅格系统将页面分为 12 列，支持响应式调整：

import { GridRow, GridCol } from "@kit.ArkUI"

GridRow({ columns: { sm: 4, md: 8, lg: 12 } }) {
  GridCol({ span: { sm: 4, md: 4, lg: 6 } }) {
    Text("左侧面板")
      .width("100%")
      .height(200)
      .backgroundColor("#f0f0f0")
  }
  GridCol({ span: { sm: 4, md: 4, lg: 6 } }) {
    Text("右侧面板")
      .width("100%")
      .height(200)
      .backgroundColor("#e0e0e0")
  }
}

三、媒体查询

通过媒体查询根据设备特征调整样式：

@Entry
@Component
struct ResponsivePage {
  @StorageProp("breakpoint") bp: string = "md"

  build() {
    Column() {
      Text("当前断点: " + this.bp)
    }
    .width("100%")
    .height("100%")
    .padding(this.bp === "lg" || this.bp === "xl" ? 32 : 16)
    .backgroundColor(this.bp === "sm" ? "#fff" : "#f5f5f5")
  }
}

四、常见适配模式

列表-详情模式

手机上分两个页面显示，平板上左右分栏：

@StorageProp("breakpoint") bp: string = "md"
@State selectedId: number = -1

build() {
  if (this.bp === "lg" || this.bp === "xl") {
    // 平板：左右分栏
    Row() {
      List() { /* 列表 */ }
        .width("40%")
        .height("100%")
      DetailView({ id: this.selectedId })
        .width("60%")
        .height("100%")
    }
  } else {
    // 手机：只显示列表
    List() { /* 列表 */ }
  }
}

五、适配检查清单