文章目录

在这里插入图片描述

每日一句正能量

真正的强大，不是征服什么，而是能承受什么。
更深层、更坚韧的强大是向内的，是一种韧性、包容力和承载力。它能承受失败、痛苦、误解、孤独和压力，并在承受中不被压垮，反而得以锤炼和升华。

摘要

摘要：折叠屏的展开态是其最具竞争力的形态——从近似直板机的折叠态切换到近 1:1 的大方形展开态，屏幕可用面积翻倍甚至三倍，但这也带来了前所未有的适配挑战。本文作为折叠屏系列的深入篇，聚焦"展开态"这一核心形态，从大方形屏布局策略、分栏模式深度实现、多窗口生产力场景、横竖屏旋转策略到设计规范约束，提供一套可直接落地的展开态适配全链路方案。

一、展开态适配全景：不是"更大的手机"，而是"更小的平板"

折叠屏展开态的核心特征可概括为三点：近 1:1 的大方形屏幕比例、md/lg 断点的大宽度区间、支持横竖屏自由旋转。这些特征决定了展开态的适配逻辑与直板机完全不同——开发者不能简单地将手机布局等比放大，而必须重新思考信息架构与交互范式。

在这里插入图片描述

1.1 展开态与折叠态的本质差异

维度 折叠态 展开态
屏幕比例 9:16 竖长屏 近 1:1 大方形屏
断点 sm (< 600vp) md/lg (≥ 600vp)
布局逻辑 单栏垂直信息流 分栏/重复/挪移布局
信息密度 低，适合快速浏览 高，适合深度处理
交互方式 拇指单手操作 双手/键鼠精细操作
典型场景 通勤、消息查看 办公、创作、多任务

1.2 核心理念：内容密度必须提升

华为官方设计规范明确要求：展开态的内容元素不少于折叠态内容元素信息量的 3/4。这意味着，当用户展开设备时，应用不能只是"把同样的内容放大"，而必须展示更多信息、提供更多功能、创造更高效率。展开态不是"更大的手机"，而是"更小的平板"——必须充分利用大屏空间提升信息密度与操作效率。

二、大方形屏布局策略：1:1 比例的特殊处理

折叠屏展开态最独特的挑战来自其近 1:1 的屏幕比例。这与直板机的 9:16 和平板的 3:2 完全不同，传统的竖长屏布局逻辑在此完全失效。

在这里插入图片描述

2.1 三种屏幕比例对比

设备类型 典型比例 布局特征 展开态适配要点
直板机 9:16 竖长屏，垂直滚动 单栏信息流，拇指热区在底部
平板 3:2 宽屏，横屏分栏 左右双栏，内容区占主导
折叠屏展开态 近 1:1 大方形屏，对称均衡 中心对称/九宫格/四象限布局

2.2 六大布局策略

针对大方形屏的对称均衡特征，推荐以下六种布局策略：

策略一：横竖屏统一布局

当屏幕比例接近 1:1 时，横竖屏旋转后的布局差异极小。此时应使用相同或相近的布局，避免用户旋转设备后产生"布局突变"的割裂感。

@Entry
@Component
struct SquareScreenPage {
  @State currentWidthBp: string = 'md';

  build() {
    // 无论横竖屏，均采用中心对称的双栏布局
    // 因为 1:1 比例下，width 和 height 接近，布局无需大幅调整
    Row() {
      Column() {
        MainContent();
      }
      .layoutWeight(1);

      Column() {
        SecondaryContent();
      }
      .layoutWeight(1);
    }
    .width('100%')
    .height('100%');
  }
}

策略二：中心对称布局

以屏幕几何中心为对称轴，左右或上下内容均衡分布。这种布局充分利用了大方形屏的视觉稳定性，适合阅读、展示类应用。

策略三：九宫格信息区

将屏幕划分为 3×3 网格，每个格子放置独立的信息模块。这种布局在 1:1 屏幕上视觉最为和谐，适合仪表盘、控制面板类应用。

Grid() {
  ForEach(this.dashboardItems, (item: DashboardItem) => {
    GridItem() {
      DashboardCard({ item });
    }
  });
}
.columnsTemplate('1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr')
.width('100%')
.height('100%')
.gap(12);

策略四：四象限分区

将屏幕分为四个象限，每个象限承载独立功能区域。这种布局天然适合多任务并行场景，如"左上文档 + 右上参考资料 + 左下笔记 + 右下聊天"。

策略五：留白与呼吸感

大方形屏切忌"填满每一寸空间"。适当的留白（推荐边距 24-32vp）能显著提升阅读体验和视觉舒适度。华为官方规范建议展开态单屏文本长度不超过 40 字，推荐 36 字左右。

三、分栏布局深度实现：单栏→双栏→三栏动态切换

分栏布局是展开态最核心的布局模式。HarmonyOS 的 Navigation 组件提供了 NavigationMode.Stack（单栏堆叠）、NavigationMode.Split（双栏分栏）和 NavigationMode.Auto（自动选择）三种模式，是实现分栏布局的关键武器。

在这里插入图片描述

3.1 三种分栏模式对比

模式 断点 布局特征 适用场景
Stack（单栏） sm 页面堆叠，点击跳转新页面 折叠态/直板机
Split（双栏） md 左导航右内容，无需跳转 展开态/平板竖屏
Auto（自动） lg/xl 三栏或智能选择 大屏/PC/三折叠

3.2 动态分栏切换核心代码

import { router } from '@kit.ArkUI';

@Entry
@Component
struct AdaptiveSplitPage {
  @State currentWidthBp: string = 'sm';
  @State pathStack: NavPathStack = new NavPathStack();
  private uiContext: UIContext | null = null;

  aboutToAppear(): void {
    this.uiContext = this.getUIContext();
    this.currentWidthBp = this.uiContext!.getWindowWidthBreakpoint();

    // 监听窗口尺寸变化，动态切换分栏模式
    window.on('windowSizeChange', () => {
      const newBp = this.uiContext!.getWindowWidthBreakpoint();
      if (newBp !== this.currentWidthBp) {
        this.currentWidthBp = newBp;
        // 断点变化时，Navigation 自动根据 mode 属性重新布局
      }
    });
  }

  aboutToDisappear(): void {
    window.off('windowSizeChange');
  }

  @Builder
  pageMap(name: string) {
    if (name === 'DetailPage') {
      DetailPage();
    }
  }

  build() {
    Navigation(this.pathStack) {
      // 左侧：列表/导航区
      List() {
        LazyForEach(this.articleList, (item: Article) => {
          ListItem() {
            ArticleListItem({ article: item })
              .onClick(() => {
                if (this.currentWidthBp === 'sm') {
                  // 折叠态：跳转到新页面（Stack 模式）
                  router.pushUrl({
                    url: 'pages/DetailPage',
                    params: { id: item.id }
                  });
                } else {
                  // 展开态：右侧直接展示详情（Split 模式）
                  this.pathStack.pushPath({
                    name: 'DetailPage',
                    param: item
                  });
                }
              });
          }
        });
      }
    }
    // 核心：根据断点动态切换 Navigation 模式
    .mode(this.currentWidthBp === 'sm' ? NavigationMode.Stack
      : this.currentWidthBp === 'md' ? NavigationMode.Split
      : NavigationMode.Auto)
    .hideTitleBar(true)
    .navBarWidth(240)           // 侧边栏宽度
    .minContentWidth(360)       // 内容区最小宽度，防止过窄
    .width('100%')
    .height('100%');
  }
}

3.3 关键参数解析

  • navBarWidth(240)：设置侧边导航栏宽度为 240vp，在展开态下提供充足的导航空间；
  • minContentWidth(360)：内容区最小宽度为 360vp，防止分屏或悬浮窗模式下内容区被压缩到无法阅读；
  • NavigationMode.Auto：系统自动根据可用宽度选择 Stack 或 Split，适合大屏/PC/三折叠设备。

四、多窗口并行与生产力场景适配

展开态的大屏空间天然适合多任务并行。HarmonyOS 提供了分屏（Split）、悬浮窗（Floating）、自由窗口（Freeform）三种多窗口模式，开发者需要在 module.json5 中显式声明支持。

在这里插入图片描述

4.1 module.json5 多窗口声明

{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "supportWindowMode": ["fullscreen", "split", "floating"],
        "preferMultiWindowOrientation": "portrait"
      }
    ]
  }
}

参数解析：

  • supportWindowMode：声明应用支持全屏、分屏、悬浮窗三种模式；
  • preferMultiWindowOrientation：设置为 portrait 时，直板机禁止上下分屏，折叠屏展开态手势触发左右分屏。

4.2 生产力场景适配矩阵

场景 展开态适配策略 交互增强
办公文档 WPS 双栏编辑，左侧目录右侧内容 键鼠快捷键、Ctrl+S 保存
邮件处理 左侧列表右侧阅读，无需跳转 拖拽附件、批量选择
视频会议 视频画面 + 共享文档分屏 悬停态上屏视频下屏控制
代码开发 文件树 + 编辑器 + 终端三栏 语法高亮、多光标编辑
设计创作 工具栏 + 画布 + 属性面板 触控笔压感、手势缩放
学习阅读 电子书 + 笔记应用分屏 眼动翻页、批注同步

4.3 跨应用拖拽交互

import { drag } from '@kit.ArkUI';

@Entry
@Component
struct DragDropPage {
  @State draggedText: string = '';

  build() {
    Row() {
      // 左侧：可拖拽内容源
      Column() {
        Text('拖拽这段文本到右侧')
          .draggable(true)
          .onDragStart((event) => {
            event.setData('text/plain', '拖拽的文本内容');
          });
      }
      .width('50%')
      .backgroundColor('#f5f5f5');

      // 右侧：拖拽目标区
      Column() {
        Text(this.draggedText || '将文本拖拽到此处')
          .width('100%')
          .height('100%')
          .backgroundColor('#e3f2fd');
      }
      .width('50%')
      .onDrop((event) => {
        const data = event.getData('text/plain');
        this.draggedText = data;
      });
    }
    .width('100%')
    .height('100%');
  }
}

五、旋转策略：展开态横竖屏自由切换

展开态支持横竖屏自由旋转，但折叠态通常固定竖屏。开发者需要根据 foldStatus 动态设置屏幕方向策略。

5.1 动态旋转策略实现

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window, display } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index');

    windowStage.getMainWindow().then((windowObj) => {
      // 初始方向：展开态自动旋转，折叠态固定竖屏
      let orientation = display.getFoldStatus() === display.FoldStatus.FOLD_STATUS_EXPANDED
        ? window.Orientation.AUTO_ROTATION
        : window.Orientation.PORTRAIT;
      windowObj?.setPreferredOrientation(orientation);

      // 监听折叠状态变化，动态调整旋转策略
      display.on('foldStatusChange', (foldStatus: display.FoldStatus) => {
        orientation = foldStatus === display.FoldStatus.FOLD_STATUS_EXPANDED
          ? window.Orientation.AUTO_ROTATION   // 展开态：自由旋转
          : window.Orientation.PORTRAIT;        // 折叠态：固定竖屏

        windowObj?.setPreferredOrientation(orientation, (err: BusinessError) => {
          if (err.code) {
            console.error(`设置方向失败: ${err.message}`);
          }
        });
      });
    });
  }

  onWindowStageDestroy(): void {
    // 销毁时注销监听
    display.off('foldStatusChange');
  }
}

5.2 横竖屏统一布局原则

对于比例接近 1:1 的展开态（如 Pura X 的 16:10 内屏），横竖屏布局应保持一致或高度相似。这是因为：

  1. 1:1 比例下，横竖屏的可用空间差异极小；
  2. 频繁切换布局会增加用户认知负担；
  3. 统一布局能确保旋转过程中的视觉连续性。
@Entry
@Component
struct RotationAdaptivePage {
  @State orientation: string = 'portrait';

  aboutToAppear(): void {
    window.on('windowSizeChange', (size: window.Size) => {
      // 判断横竖屏
      this.orientation = size.width > size.height ? 'landscape' : 'portrait';
    });
  }

  build() {
    // 对于近 1:1 屏幕，横竖屏使用相同布局
    // 仅调整部分元素的排列方向
    if (this.orientation === 'landscape') {
      Row() { this.buildContent(); }
    } else {
      Column() { this.buildContent(); }
    }
  }

  @Builder
  buildContent() {
    // 横竖屏共享的内容结构
    HeaderSection();
    MainContent();
    FooterSection();
  }
}

六、设计规范约束与常见问题排查

华为官方折叠屏设计规范对展开态提出了明确的约束条件，违反这些规范将直接影响应用上架审核。

在这里插入图片描述

6.1 官方设计规范六条铁律

规范项 具体要求 违规后果
内容完整性 展开态内容元素不少于折叠态的 3/4 审核被拒，用户体验差
字体适配 字体大小变化 ≤ 1.2 倍，单屏文本 ≤ 40 字/行 阅读体验差，信息密度低
图标适配 图标大小变化 ≤ 1.2 倍，保持视觉体量 界面失衡，操作困难
图片视频 禁止变形、裁剪、显示不全，保持原始比例 内容缺失，视觉灾难
弹出框 大小变化 ≤ 1.2 倍，位置居中或跟随触发元素 弹窗错位，操作失效
边界空白 左右边界空白不宜过大，内容充分利用宽度 屏幕浪费，体验空洞

6.2 六大常见问题与解决方案

问题现象 根因分析 解决方案
边界空白过大 内容宽度固定，未使用响应式布局 使用 layoutWeight 或百分比宽度，确保内容填满可用空间
内容元素减少 展开后仅放大原有元素，未增加信息量 使用重复/挪移布局，Grid 多列展示，提升信息密度
字体图标突变 未控制变化倍数，展开后视觉失衡 统一使用 fontSize 和 iconSize 变量，限制变化 ≤ 1.2 倍
图片拉伸变形 未设置 aspectRatio 或 objectFit 图片组件强制保持原始比例，objectFit: ImageFit.Cover
旋转后布局错乱 横竖屏布局差异过大 比例近 1:1 时统一横竖屏布局，仅微调排列方向
分屏后显示异常 未声明 supportWindowMode module.json5 添加 "split"、"floating" 支持

七、总结：展开态适配的五条心法

本文从大方形屏布局、分栏模式、多窗口生产力、旋转策略到设计规范，系统拆解了折叠屏展开态的适配全链路。最后，将核心经验凝练为五条心法：

内容密度必须提升：展开态不是放大，而是增加信息量，确保内容元素不少于折叠态的 3/4；
大方形屏用对称布局：1:1 比例适合中心对称、九宫格、四象限等均衡布局，避免竖长屏思维；
分栏模式动态切换：Navigation 的 Stack/Split/Auto 三种模式，根据断点自动选择，无需跳转连续浏览；
多窗口声明不可少：module.json5 中必须声明 supportWindowMode，否则分屏/悬浮窗功能完全不可用；
旋转策略要区分：展开态自由旋转、折叠态固定竖屏，近 1:1 屏幕横竖屏统一布局。

折叠屏展开态的适配，本质上是一场从"移动优先"到"大屏优先"的思维转变。当用户展开设备的瞬间，他们期待的不是"更大的手机"，而是"更高效的工具"。掌握本文的技术体系，开发者就能在折叠屏这片蓝海中，构建出真正"形态感知、信息密集、效率优先"的原生应用。

系列文章回顾

转载自：https://blog.csdn.net/u014727709/article/details/164174026
欢迎 👍点赞✍评论⭐收藏，欢迎指正

# 设计规范
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

【听见课堂 HarmonyOS NEXT 实战系列 23】Core Speech Kit + AudioCapturer：本机语音转写链路拆解

avatar HarmonyOS开发者社区
cover

HarmonyOS 权限申请完整流程：声明、检查、请求、拒绝后二次授权

avatar HarmonyOS开发者社区
cover

【听见课堂 HarmonyOS NEXT 实战系列 22】麦克风权限应在什么时候申请：HarmonyOS 按需授权与恢复路径

avatar HarmonyOS开发者社区