响应式布局

概述

响应式设计（Responsive Web Design，简称RWD）在Web网站设计领域是一种网页设计方法论，旨在让网站在不同设备和屏幕尺寸上都能提供良好的阅读和交互体验，而无需为每一个新设备或屏幕尺寸创建单独的版本。这种设计方法的核心在于页面布局和内容可以根据用户所使用的设备特性（如屏幕尺寸、分辨率、方向等）进行灵活调整。

响应式设计在HarmonyOS中的应用主要体现在UI开发上，目的是确保应用能够在搭载HarmonyOS的多种设备上，包括不同屏幕尺寸和分辨率的设备，提供一致且优秀的用户体验。HarmonyOS为此提供了一系列的响应式布局能力和工具，用来实现多端布局。

响应式布局是基于响应式设计方法论进行布局的方法，核心思想是页面根据不同屏幕尺寸自动调整布局，提供更舒适的界面和更好的用户体验。响应式布局页面的效果图如下：

图1 响应式布局示意图1

图2 响应式布局示意图2

本文将详细介绍实现响应式布局的四种响应式布局能力，帮助开发者实现响应式布局效果。

断点

响应式布局是指页面内的元素可以根据特定的特征（如窗口宽度、屏幕方向等）自动变化以适应外部容器变化的布局能力。响应式布局中最常使用的特征是窗口宽度及窗口高宽比，可以将窗口宽度及窗口高宽比划分为不同的范围，称之为“断点”。当窗口宽度及窗口高宽比从一个断点变化到另一个断点时，改变页面布局（如将页面内容从单列排布调整为双列排布甚至三列排布等）以获得更好的显示效果。

本章节将通过详细介绍断点的设计原理、定义以及使用，帮助开发者掌握通过断点实现响应式布局。

断点的设计原理

提升全场景体验，需考虑多设备连续性。应用页面布局设计时推荐遵循以下原则：

• 原则一：两个宽度相近的窗口，页面布局相同，断点归一。
• 原则二：高度相对宽度较小的窗口，呈现横向窗口或类方形窗口时，页面布局进行差异化设计，增加断点。

因此，系统设计了横向和纵向断点分别代表窗口的不同特征，作为判断页面布局和交互体验的条件：

• 横向断点以窗口宽度值区分，代表窗口宽度。
• 纵向断点以窗口高宽比区分，代表窗口相对高度，表示横向、方形或纵向窗口。

下文横向断点的使用案例章节将介绍如何使用横向断点实现原则一，纵向断点的使用案例章节将介绍如何结合横向和纵向断点实现原则二。

断点的定义

横向断点以应用窗口宽度为判断条件，建议划分为如下几个区间：

纵向断点根据应用窗口的高宽比进行判断，建议划分为如下几个区间：

图3 HarmonyOS常用设备断点区间表

当前HarmonyOS主流设备窗口全屏时尺寸和横纵断点区间如下表所示。

通过断点刷新UI

通过断点环境变量刷新UI

从API version 22起，开发者可利用响应式系统环境变量装饰器@Env读取断点信息。当组件所在窗口尺寸发生变化时，@Env装饰的断点环境变量将更新，并触发与该断点环境变量关联的组件刷新，从而实现界面内容的同步更新。装饰变量声明如下，更多场景请参考@Env：环境变量。

获取@Component/@ComponentV2所在窗口的环境变量信息后，当窗口尺寸变化时，断点环境变量将根据新的窗口尺寸更新，并触发相关UI组件的刷新。常见场景包括：

• 通过BuilderNode切换窗口后，触发断点环境变量重新获取断点信息。
• 横竖屏或折叠状态切换时，窗口的横纵向断点刷新，断点环境变量将同步更新。

断点环境变量具体使用方式请参考@Env：环境变量使用场景。环境变量初始化流程请参考@Env初始化流程。

通过主动监听断点变化刷新UI

1. 使用自定义窗口信息类WindowInfo保存窗口断点信息。
2. WindowUtil类中创建窗口信息类对象，使用getWindowWidthBreakpoint()与getWindowHeightBreakpoint()获取当前窗口横向断点与纵向断点。通过on('windowSizeChange')开启窗口尺寸变化的监听，并在监听回调中重新获取断点。
   收起

   自动换行

   深色代码主题

   复制

   export class WindowUtil {
     // ...
     public mainWindowInfo: WindowInfo = new WindowInfo();
     // ...
     public onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => {
       this.mainWindowInfo.windowSize = windowSize;
       this.mainWindowInfo.widthBp = this.uiContext!.getWindowWidthBreakpoint();
       this.mainWindowInfo.heightBp = this.uiContext!.getWindowHeightBreakpoint();
     };
     // ...
     updateWindowInfo(): void {
       try {
         // ...
         // First time get width/height breakpoint.
         this.mainWindowInfo.widthBp = this.uiContext!.getWindowWidthBreakpoint();
         this.mainWindowInfo.heightBp = this.uiContext!.getWindowHeightBreakpoint();
         // Register for window size change monitoring, update window size and width/height breakpoint.
         this.mainWindow.on('windowSizeChange', this.onWindowSizeChange);
         // ...
       } catch (error) {
         let err = error as BusinessError;
         hilog.error(0x0000, `TestLog`, `Failed to update window info. Code: ${err.code}, message: ${err.message}`);
       }
     }
     // ...
   }

   WindowUtil.ets

3. 在EntryAbility的onWindowStageCreate()生命周期中，获取应用窗口实例，对WindowUtil进行初始化操作，并保存至AppStorage中。在loadContent加载完页面后，完成断点监听注册、断点更新等操作。完成上述步骤后，当窗口尺寸发生变化时，更新横纵断点。
   收起

   自动换行

   深色代码主题

   复制

   onWindowStageCreate(windowStage: window.WindowStage): void {
     // ...
     try {
       this.windowUtil = new WindowUtil(windowStage.getMainWindowSync());
     } catch (error) {
       let err = error as BusinessError;
       hilog.error(0x0000, 'TestLog', `Failed to get main window. Code: ${err.code}, message: ${err.message}`);
     }
     AppStorage.setOrCreate('windowUtil', this.windowUtil);
   
     windowStage.loadContent('pages/Index', (err) => {
       // ...
       this.windowUtil!.setUIContext();
       this.windowUtil!.setImmersiveType(ImmersiveType.IMMERSIVE);
       this.windowUtil!.updateWindowInfo();
     });
   }

   EntryAbility.ets

4. 使用@StorageLink装饰器获取窗口管理类WindowUtil对象，子组件初始化时传递窗口信息类对象，使子组件可以获取当前窗口的断点信息。
   收起

   自动换行

   深色代码主题

   复制

   @Component
   export struct GridLayout {
     @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
     pageInfos: NavPathStack = new NavPathStack();
   
     build() {
       NavDestination() {
         GridView({
           mainWindowInfo: this.windowUtil?.mainWindowInfo,
           pageInfos: this.pageInfos
         })
       }
       // ...
     }
   }

   GridLayout.ets

5. 使用@ObjectLink装饰器接收窗口信息类对象，根据获取的窗口信息，对不同断点区间进行针对性布局。如下示例代码完成了在不同断点下，Grid组件显示不同数量列的功能。
   收起

   自动换行

   深色代码主题

   复制

   @Component
   export struct GridView {
     @ObjectLink mainWindowInfo: WindowInfo;
     // ...
   
     build() {
       Scroll() {
         Column() {
           // ...
           Grid() {
             // ...
           }
           .width('100%')
           .columnsTemplate(`repeat(${new WidthBreakpointType(2, 3, 4, 4).getValue(this.mainWindowInfo.widthBp)}, 1fr)`)
           .columnsGap(12)
           .rowsGap(12)
         }
         // ...
       }
       // ...
     }
   }

   GridView.ets

横向断点的使用案例

针对布局拉通（两个宽度相近的窗口，页面布局应保持一致），本章节介绍实际开发中横向断点的使用。

实现多设备应用时，首先根据不同设备类型对应的横向断点集合，规划多种设计方案。例如，应用需要支持手机、双折叠（Mate X系列）和平板，需要考虑的三个横向断点分别是sm、md和lg，并设计相应页面布局。设计效果图如下：

在实际应用开发中，可能不会涉及到全部的横向断点。开发者可以根据应用的实际需求，灵活选用并整理工具类，为响应式布局的属性赋值。例如，如果应用仅需适配手机、双折叠和平板设备，可以设计工具类 “WidthBreakpointType”，覆盖三个横向断点下的成员变量，从而实现具体的响应式布局。

export class WidthBreakpointType<T> {
  sm: T;
  md: T;
  lg: T;
  xl: T;

  constructor(sm: T, md: T, lg: T, xl: T) {
    this.sm = sm;
    this.md = md;
    this.lg = lg;
    this.xl = xl
  }

  getValue(widthBp: WidthBreakpoint): T {
    if (widthBp === WidthBreakpoint.WIDTH_XS || widthBp === WidthBreakpoint.WIDTH_SM) {
      return this.sm;
    }
    if (widthBp === WidthBreakpoint.WIDTH_MD) {
      return this.md;
    }
    if (widthBp === WidthBreakpoint.WIDTH_LG) {
      return this.lg;
    } else {
      return this.xl;
    }
  }
}

在实际开发中，设置不同断点下的字体大小。例如，在sm、md、lg横向断点下，字体大小分别为14fp、16fp、18fp，通过工具类BreakpointType为属性赋值。

Text('Test')
  .fontSize(new BreakpointType('14fp', '16fp', '18fp').getValue(this.currentWidthBreakpoint))

在sm和md横向断点下，字体大小为14fp；在lg断点下，字体大小为16fp。使用三元表达式结合横向断点为属性赋值。

Text('Test')
  .fontSize(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? '16fp' : '14fp')

纵向断点的使用案例

针对高度相对宽度较小的窗口（如横向窗口或类方形窗口），本章节将介绍如何在实际开发中结合使用横向断点和纵向断点进行特殊布局设计。

系统推荐以下方式判断横向窗口或类方形窗口，并展示特殊页面布局。

// Judgment of the horizontal window. (The actual application may need to be combined with other conditions, for example, determine the horizontal breakpoint)
if (this.currentHeightBreakpoint === HeightBreakpoint.HEIGHT_SM &&
  this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD) {
  // Horizontal window page layout.
}
// Judgment of the square window. (The actual use may need to be combined with other conditions, such as determining horizontal breakpoints)
if (this.currentHeightBreakpoint === HeightBreakpoint.HEIGHT_MD &&
  this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM) {
  // Square-like window page layout.
}