在 HarmonyOS 中，实现多端自适应布局的核心是通过响应式布局和断点配置来适配不同屏幕尺寸的设备。其核心思想是：为不同的屏幕宽度范围（断点）定义不同的布局规则。以下是详细的实现步骤和代码示例。

1. 理解断点与屏幕适配HarmonyOS 官方推荐了一套基于屏幕逻辑宽度的断点系统，用于区分不同类型的设备（如手机、平板、智慧屏等）。常见的断点配置如下：

注：逻辑宽度单位 vp (Virtual Pixel) 是 HarmonyOS 中用于屏幕适配的虚拟像素单位，与屏幕密度无关。

2. 实现断点配置与自适应布局

主要通过 @ohos.mediaquery媒体查询模块和栅格系统来实现。

步骤一：导入媒体查询模块

在 .ets 文件的顶部导入模块。

import mediaquery from '@ohos.mediaquery';

步骤二：定义断点监听器

在组件中定义对不同断点的监听器，并在 aboutToAppear 生命周期中注册它们。

// 定义不同断点的条件字符串
let phoneSM: string = '(320vp<=width<600vp)'; // 小屏手机
let phoneLG: string = '(600vp<=width)'; // 大屏手机或平板
// 可以定义更多断点，如：let tablet: string = '(840vp<=width)';

// 定义状态变量，用于控制不同断点下的UI呈现
@State currentBreakpoint: string = 'phoneSM'; // 默认值

// 定义各个断点的监听器回调函数
smListener = mediaquery.matchMediaSync(phoneSM);
lgListener = mediaquery.matchMediaSync(phoneLG);

aboutToAppear() {
  // 注册小屏手机断点监听器 this.smListener.on('change', (result: mediaquery.MediaQueryResult) => {
    if (result.matches) {
      this.currentBreakpoint = 'phoneSM';
      console.info('当前屏幕匹配：小屏手机');
    }
  });
  // 注册大屏手机/平板断点监听器 this.lgListener.on('change', (result: mediaquery.MediaQueryResult) => {
    if (result.matches) {
      this.currentBreakpoint = 'phoneLG';
      console.info('当前屏幕匹配：大屏手机/平板');
    }
  });
}

步骤三：在UI中使用断点状态进行条件渲染

在 build() 方法中，根据 currentBreakpoint 状态变量，使用条件语句（如 if/else）或状态管理来构建不同的UI布局。

build() {
  Column() {
    // 示例：根据断点显示不同的文本和布局 if (this.currentBreakpoint === 'phoneSM') {
      // 小屏布局：单列，字体较小 Text('小屏手机视图')
        .fontSize(16)
        .fontColor(Color.Black);
      Column() {
        // 你的小屏组件内容
        Text('内容区块 A');
        Text('内容区块 B');
      }
      .width('100%')
 .padding(10);
    } else if (this.currentBreakpoint === 'phoneLG') {
      // 大屏布局：多列，字体较大，充分利用空间
      Text('大屏设备视图')
        .fontSize(24)
        .fontColor(Color.Blue);
      Row() {
        // 你的大屏多列组件内容
        Column() {
          Text('主内容区');
        }
        .layoutWeight(2) // 权重布局        .padding(20);

        Column() {
          Text('侧边栏');
        }
        .layoutWeight(1)
        .padding(20)
        .backgroundColor(Color.Grey);
      }
      .width('100%')
      .height('100%');
    }
  }
  .width('100%')
  .height('100%');
}

步骤四：使用栅格系统进行精细布局 (推荐)

对于更复杂的响应式布局，推荐使用 GridRow 和 GridCol 栅格组件。栅格系统将容器宽度分为12等份，可以更精细地控制不同断点下组件的占位。

首先，在 build() 方法外层定义栅格的断点配置对象 。

  xs: { value: '320vp', }, // 超小屏
  sm: { value: '520vp', }, // 小屏
  md: { value: '840vp', }, // 中屏
  lg: { value: '1080vp', }, // 大屏
};

然后，在UI中使用 GridRow 并应用断点配置，其子组件 GridCol 可以指定在不同断点下占据的列数。

build() {
  Column() {
    // 使用栅格容器，并传入断点配置 GridRow({ breakpoints: this.breakpoints }) {
      // 子组件1：在 xs/sm 断点下占满12列（整行），在 md 及以上断点下占6列（半行）
      GridCol({ span: { xs: 12, sm: 12, md: 6, lg: 6 } }) {
        Column() {
          Text('卡片1').fontSize(20);
          Text('此内容在小屏设备上单独成行，在中大屏上与卡片2并排。');
        }
        .padding(20)
        .backgroundColor(Color.Orange)
        .borderRadius(15)
        .width('100%');
      }

      // 子组件2：跨度配置与组件1相同，实现并排
      GridCol({ span: { xs: 12, sm: 12, md: 6, lg: 6 } }) {
        Column() {
          Text('卡片2').fontSize(20);
          Text('与卡片1的布局行为一致。');
        }
        .padding(20)
        .backgroundColor(Color.Pink)
        .borderRadius(15)
        .width('100%');
      }
    }
    .width('100%')
    .padding(20)
 .backgroundColor('#F5F5F5');
  }
  .width('100%')
  .height('100%');
}

3. 关键步骤与最佳实践总结

1. 规划断点：根据你的目标设备（手机、平板、折叠屏等）规划合理的逻辑宽度（vp）断点。
2. 选择方案：
   • 简单条件渲染：使用 媒体查询(mediaquery) 监听断点变化，配合 if/else 进行整体布局切换。适用于布局结构差异较大的场景。
   • 精细流式布局：使用 栅格系统(GridRow/GridCol)。通过配置 span 在不同断点下的值，让组件自动流动排列。适用于内容区域需要按比例自适应排列的场景，是更推荐的主流方式 。
3. 单位使用：布局尺寸和字体大小建议使用 vp 或百分比 (%)，而非固定像素 px，以确保弹性。
4. 生命周期管理：在 aboutToDisappear 生命周期中注销监听器，防止内存泄漏。