HarmonyOS 鸿蒙Next中组件自适应

一、场景概述

在移动应用开发中，不同设备的屏幕形态各异，如刘海屏、全面屏、折叠屏等，同时系统状态栏、导航栏、软键盘等元素也会占据屏幕空间。为了确保应用内容在各种设备和场景下都能正常显示，本文将详细介绍组件自适应的实现原理、适配指导以及具体的场景案例。

1.1 使用场景

组件自适应（界面元素自适应），指的是可复用的UI组件能够根据其父容器或可用空间的尺寸变化，自动调整其内部结构、样式和元素排列方式，以提供用户最佳体验的布局方法。

横向断点	sm	md	lg	xl
展示逻辑	上：2行4列 中：无浮动广告 下：每行2列	上：1行8列 中：显示浮动广告，延伸背景颜色 下：每行3列	上：1行8列 中：显示浮动广告，延伸背景颜色 下：每行3列	上：1行8列 中：显示浮动广告，延伸背景颜色 下：每行3列
展示布局

1.2 常见问题

组件自适应布局主要用于适配多设备在不同使用状态下所引起的屏幕尺寸变化，例如设备开合接续、横竖屏切换以及窗口尺寸动态调整等场景。在实际应用中，如果未针对这些变化进行合理适配，容易出现以下常见问题：

• 页面留白留黑
• 大图大字体
• 内容文字过小

1.3 多设备适配

• 适配点1：基于断点实现组件自适应在多设备布局适配，窗口响应（横竖屏、分屏、折叠开合等）

• 适配点2：组件尺寸自适应覆盖拉伸、均分、占比、缩放、延伸、隐藏、折行

二、开发指导

2.1 H5开发

2.1.1 关键能力

通过Web组件的src属性引入H5页面，并使用**registerJavaScriptProxy()**原生侧方法，将JavaScript对象注入到window对象中，从而在window对象中调用该对象的方法，实现H5页面调用原生方法。

Web({ src: 'http://localhost:5173/SampleWSC0150/MainPage', controller: this.webController })
  .onControllerAttached(() => {
    this.webController.registerJavaScriptProxy(this, 'webClass', ['pushToPage', 'clearPage', 'getLastPage']);
    this.webController.refresh();
  })

通过 BreakpointManager 获取当前断点值，并根据断点映射为不同的网格列模板。

const menuColumnsTemplate = {
  xs: '1fr 1fr 1fr 1fr',
  sm: '1fr 1fr 1fr 1fr',
  md: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
  lg: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
  xl: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
};

const productColumnsTemplate = {
  xs: '1fr',
  sm: '1fr 1fr',
  md: '1fr 1fr 1fr',
  lg: '1fr 1fr 1fr',
  xl: '1fr 1fr 1fr'
};

2.1.2 指导案例

下面以VUE3框架为例，通过断点工具类统一管理当前界面尺寸档位，并基于断点值动态计算网格列数，通过CSS中的媒体查询@media控制元素的显隐，从而实现不同设备下的自适应展示。

使用web_adaptive_layout组件库提供的断点管理能力，由组件库统一感知当前设备所处断点，动态绑定组件配置columnsTemplate返回对应的列数，实现显示列数自适应。通过控制每行显示的列数，如控制2行4列或者1行8列实现折行、均分能力；每行固定显示3列体现占比、缩放能力。通过网格的占比、均分能力，通过调整CSS样式实现组件自适应变化。

<MultiGridVue :columnsTemplate="menuColumnsTemplate" :gridRowGap="8" :gridColumnGap="8"
  style="height: auto; margin-bottom: 8px;">
  <div v-for="item in topMenuList" :key="item.id" class="menu-item">
    <div class="menu-icon">
      <img :src="item.image" alt="菜单图标" />
    </div>
  </div>
</MultiGridVue>

const menuColumnsTemplate = {
  xs: '1fr 1fr 1fr 1fr',
  sm: '1fr 1fr 1fr 1fr',
  md: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
  lg: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
  xl: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
};

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  margin-bottom: 8px;
}
.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

通过CSS中的媒体查询@media，设置不同断点尺寸下是否显示黄色广告色块，实现组件自适应延伸、隐藏

.ad-stack-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
  height: 80px;
  margin-bottom: 8px;
  background-color: #f1b6c7;
}
.ad-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 55px;
}
/* hide yellow block */
[@media](/user/media) (max-width: 629px) {
  .float-ad {
    display: none;
  }
  .main-ad {
    width: 360px;
  }
  .ad-image {
    width: 360px;
  }
}
/* show yellow block, ad width 360, float width (360+80+80+55+55+16+16) */
[@media](/user/media) (min-width: 662px) {
  .float-ad {
    display: flex;
  }
  .main-ad {
    width: 360px;
  }
  .ad-image {
    width: 360px;
  }
}

2.1.3 示例代码

场景Sample示例代码地址：H5三方框架赋能指导配套代码