前言

Pura X Max 的适配不能只靠外屏和内屏两个判断。

外屏通常对应窄窗口，展开态通常对应宽窗口，但应用实际运行时还会遇到分屏、悬浮窗、横屏、平板和 2in1 等情况。页面真正能使用的空间，最终取决于当前应用窗口宽度。

Pura X Max 外屏为 5.4 英寸，内屏为 7.7 英寸，外屏分辨率为 1848 × 1264，内屏分辨率为 2584 × 1828，系统版本为 HarmonyOS 6.1。这个设备本身已经带来了明显的窗口变化，页面如果继续按固定机型写判断，后续很容易被分屏和多窗口场景打断。

我在做这类页面时，会先建立一套窗口断点。compact 处理窄窗口，medium 处理过渡窗口，expanded 处理宽窗口。Pura X Max 模拟器上最容易稳定验证的是 compact 和 expanded，medium 更多是给分屏、自由窗口、平板窄窗口和 2in1 场景预留。这样写更贴近真实项目，而不是把所有判断都绑定在某一台设备上。

断点应该从窗口宽度开始

很多适配问题最开始都会被写成机型判断。

看到 Pura X Max，就切换某个布局；看到平板，就切换另一套布局；看到手机，再回到手机布局。这个方案短期能跑，但它有一个很明显的问题：同一台设备的应用窗口不一定只有一种宽度。

Pura X Max 折叠态是窄窗口。

Pura X Max 展开态是宽窗口。

分屏后可能变成中间宽度。

悬浮窗可能比外屏还窄。

横屏后宽高比例又会发生变化。

所以页面适配更适合从窗口宽度出发。当前窗口宽度进入哪一档，页面就切换到对应结构。HarmonyOS 响应式布局也强调应用应根据不同屏幕尺寸和分辨率调整页面，让布局适应不同设备和窗口状态。

我这里先定义三档。

compact 用于窄窗口。页面保持单列，字号略小，主操作放到底部，减少横向拥挤。

medium 用于中等窗口。卡片可以切到双列，描述信息开始显示，操作区放到内容上方。

expanded 用于宽窗口。内容区和操作区左右分离，让大屏空间承担更多上下文。

这三个状态不一定都能通过 Pura X Max 的普通开合稳定触发。compact 和 expanded 主要通过折叠态、展开态验证；medium 保留在代码里，用来覆盖更复杂的窗口宽度。

compact、medium、expanded 的边界怎么定

断点值不要直接当成固定标准。它应该服务页面内容。

如果页面只是功能入口卡片，medium 可以来得早一点。比如 600vp 左右就能进入双列。

如果页面卡片里有摘要、按钮和状态标签，expanded 可以放得晚一点。比如 900vp 之后再把操作区移到右侧。

这次示例里采用两个阈值。

private readonly mediumWidth: number = 600;private readonly expandedWidth: number = 900;

窗口宽度低于 600vp，进入 compact。

窗口宽度达到 600vp，但低于 900vp，进入 medium。

窗口宽度达到 900vp，进入 expanded。

布局状态最好收束到一个函数里。

private getLayoutMode(): string {  const width = this.getEffectiveWidth();​  if (width >= this.expandedWidth) {    return 'expanded';  }​  if (width >= this.mediumWidth) {    return 'medium';  }​  return 'compact';}

这里我没有让每个组件自己判断宽度。卡片列数、页面边距、标题字号、操作区位置，都通过 getLayoutMode() 间接判断。这样后续要改断点，只需要改一个地方。

页面实际宽度仍然通过 onAreaChange 获取。这个事件会在组件显示区域变化时触发，适合在页面根容器上记录当前可用宽度。

.onAreaChange((_: Area, newValue: Area) => {  const width = Number(newValue.width);  if (!Number.isNaN(width) && width > 0) {    this.pageWidth = width;  }})

实际项目里，pageWidth 就是断点计算来源。为了在一个页面里更直观地观察三档变化，下面的示例加了演示宽度按钮。真实页面可以删掉这组按钮，只保留窗口宽度判断。

把断点放进页面跑一下

下面的页面可以放到 entry/src/main/ets/pages/Index.ets 运行。Pura X Max 适配调试可以使用 DevEco Studio 6.1.0，并安装 Pura X Max 模拟器验证应用在该机型上的表现。

页面顶部会显示实际窗口宽度、当前用于断点计算的宽度和布局状态。默认使用真实窗口宽度。为了方便观察 medium，页面顶部提供了自动、compact、medium、expanded 四个按钮。选择自动时，页面完全跟随窗口宽度；选择其他按钮时，只是把内容容器限制到对应演示宽度，方便在 Pura X Max 模拟器里对比三档布局。

interface DashboardCard {  id: number;  title: string;  value: string;  desc: string;  status: string;}​@Entry@Componentstruct Index {  @State private pageWidth: number = 0;  @State private previewWidth: number = 0;  @State private selectedId: number = 1;​  private readonly mediumWidth: number = 600;  private readonly expandedWidth: number = 900;​  private readonly cards: DashboardCard[] = [    {      id: 1,      title: '待处理材料',      value: '12',      desc: '包含拍照整理、相册导入和文本记录',      status: '需要处理'    },    {      id: 2,      title: '今日提醒',      value: '5',      desc: '从通知、会议和预约信息中提取',      status: '即将开始'    },    {      id: 3,      title: '已整理记录',      value: '48',      desc: '本周已经完成结构化整理的内容',      status: '稳定'    },    {      id: 4,      title: '待确认摘要',      value: '7',      desc: '需要人工确认识别结果和下一步动作',      status: '待确认'    },    {      id: 5,      title: '图片识别',      value: '23',      desc: '来自原图预览和 OCR 处理流程',      status: '处理中'    },    {      id: 6,      title: '会议记录',      value: '9',      desc: '包含会议纪要、行动项和关联项目',      status: '已同步'    }  ];​  private getEffectiveWidth(): number {    if (this.previewWidth > 0) {      return this.previewWidth;    }​    return this.pageWidth;  }​  private getLayoutMode(): string {    const width = this.getEffectiveWidth();​    if (width >= this.expandedWidth) {      return 'expanded';    }​    if (width >= this.mediumWidth) {      return 'medium';    }​    return 'compact';  }​  private isCompact(): boolean {    return this.getLayoutMode() === 'compact';  }​  private isMedium(): boolean {    return this.getLayoutMode() === 'medium';  }​  private isExpanded(): boolean {    return this.getLayoutMode() === 'expanded';  }​  private getModeText(): string {    if (this.isExpanded()) {      return 'expanded · 宽窗口';    }​    if (this.isMedium()) {      return 'medium · 中等窗口';    }​    return 'compact · 窄窗口';  }​  private getModeDesc(): string {    if (this.isExpanded()) {      return '宽窗口下，内容区和操作区左右分离，适合展示更多上下文。';    }​    if (this.isMedium()) {      return '中等窗口下，卡片进入双列，操作区放到内容上方。';    }​    return '窄窗口下，页面保持单列，主操作靠近底部。';  }​  private getColumnsTemplate(): string {    if (this.isCompact()) {      return '1fr';    }​    return '1fr 1fr';  }​  private getPagePadding(): number {    if (this.isExpanded()) {      return 24;    }​    if (this.isMedium()) {      return 20;    }​    return 16;  }​  private getTitleSize(): number {    if (this.isExpanded()) {      return 28;    }​    if (this.isMedium()) {      return 25;    }​    return 22;  }​  private getCardTitleSize(): number {    if (this.isCompact()) {      return 16;    }​    return 17;  }​  private getCardValueSize(): number {    if (this.isExpanded()) {      return 34;    }​    if (this.isMedium()) {      return 30;    }​    return 28;  }​  private getContentWidth(): Length {    if (this.previewWidth > 0) {      return this.previewWidth;    }​    return '100%';  }​  private getSelectedCard(): DashboardCard {    const found = this.cards.find((item: DashboardCard) => item.id === this.selectedId);    return found ? found : this.cards[0];  }​  private getStatusColor(status: string): string {    if (status === '需要处理' || status === '待确认') {      return '#B25E00';    }​    if (status === '处理中' || status === '即将开始') {      return '#7C3AED';    }​    return '#276749';  }​  private getStatusBgColor(status: string): string {    if (status === '需要处理' || status === '待确认') {      return '#FFF4E5';    }​    if (status === '处理中' || status === '即将开始') {      return '#F1EAFE';    }​    return '#E7F5EE';  }​  private setPreview(width: number) {    this.previewWidth = width;  }​  @Builder  private HeaderPanel() {    Column({ space: 10 }) {      Row() {        Column({ space: 4 }) {          Text('窗口宽度驱动页面断点')            .fontSize(this.getTitleSize())            .fontWeight(FontWeight.Bold)            .fontColor('#111827')​          Text(this.getModeText())            .fontSize(14)            .fontColor('#2F8F83')        }        .layoutWeight(1)​        Text('窗口 ' + Math.round(this.pageWidth).toString() + 'vp')          .fontSize(12)          .fontColor('#374151')          .padding({ left: 10, right: 10, top: 6, bottom: 6 })          .backgroundColor('#FFFFFF')          .borderRadius(999)      }      .width('100%')​      Text('断点宽度：' + Math.round(this.getEffectiveWidth()).toString() + 'vp。' + this.getModeDesc())        .fontSize(14)        .fontColor('#6B7280')        .lineHeight(21)​      Row({ space: 8 }) {        this.PreviewButton('自动', 0)        this.PreviewButton('compact', 420)        this.PreviewButton('medium', 720)        this.PreviewButton('expanded', 960)      }      .width('100%')    }    .width('100%')  }​  @Builder  private PreviewButton(text: string, width: number) {    Text(text)      .fontSize(12)      .fontColor(this.previewWidth === width ? '#FFFFFF' : '#2F8F83')      .textAlign(TextAlign.Center)      .padding({ left: 10, right: 10, top: 7, bottom: 7 })      .backgroundColor(this.previewWidth === width ? '#2F8F83' : '#E6F4F1')      .borderRadius(999)      .onClick(() => {        this.setPreview(width);      })  }​  @Builder  private StatusPill(status: string) {    Text(status)      .fontSize(12)      .fontColor(this.getStatusColor(status))      .padding({ left: 8, right: 8, top: 4, bottom: 4 })      .backgroundColor(this.getStatusBgColor(status))      .borderRadius(999)  }​  @Builder  private DataCard(item: DashboardCard) {    Column({ space: this.isCompact() ? 10 : 12 }) {      Row() {        this.StatusPill(item.status)​        Blank()​        if (this.selectedId === item.id) {          Text('当前')            .fontSize(12)            .fontColor('#2F8F83')        }      }      .width('100%')​      Text(item.title)        .fontSize(this.getCardTitleSize())        .fontWeight(FontWeight.Medium)        .fontColor('#111827')        .maxLines(1)        .textOverflow({ overflow: TextOverflow.Ellipsis })​      Text(item.value)        .fontSize(this.getCardValueSize())        .fontWeight(FontWeight.Bold)        .fontColor('#111827')​      if (!this.isCompact()) {        Text(item.desc)          .fontSize(13)          .fontColor('#6B7280')          .lineHeight(19)          .maxLines(this.isExpanded() ? 2 : 1)          .textOverflow({ overflow: TextOverflow.Ellipsis })      }    }    .width('100%')    .padding(this.isExpanded() ? 18 : 16)    .backgroundColor(this.selectedId === item.id ? '#EEF7F5' : '#FFFFFF')    .borderRadius(20)    .border({      width: this.selectedId === item.id ? 1.5 : 1,      color: this.selectedId === item.id ? '#2F8F83' : '#E5E7EB'    })    .shadow({      radius: this.selectedId === item.id ? 12 : 8,      color: '#12000000',      offsetX: 0,      offsetY: 4    })    .onClick(() => {      this.selectedId = item.id;    })  }​  @Builder  private CardGrid() {    Scroll() {      Grid() {        ForEach(this.cards, (item: DashboardCard) => {          GridItem() {            this.DataCard(item)          }        }, (item: DashboardCard) => item.id.toString())      }      .columnsTemplate(this.getColumnsTemplate())      .columnsGap(12)      .rowsGap(12)      .width('100%')      .padding({ bottom: 16 })    }    .layoutWeight(1)    .width('100%')    .edgeEffect(EdgeEffect.Spring)  }​  @Builder  private OperationPanel() {    Column({ space: 14 }) {      Column({ space: 6 }) {        Text('当前操作')          .fontSize(16)          .fontWeight(FontWeight.Medium)          .fontColor('#111827')​        Text(this.getSelectedCard().title)          .fontSize(15)          .fontColor('#4B5563')          .lineHeight(22)          .maxLines(2)          .textOverflow({ overflow: TextOverflow.Ellipsis })      }      .width('100%')      .alignItems(HorizontalAlign.Start)​      Row({ space: 8 }) {        Button('处理')          .fontSize(14)          .fontColor('#FFFFFF')          .height(40)          .layoutWeight(1)          .backgroundColor('#2F8F83')          .borderRadius(20)​        Button('详情')          .fontSize(14)          .fontColor('#2F8F83')          .height(40)          .layoutWeight(1)          .backgroundColor('#E6F4F1')          .borderRadius(20)      }      .width('100%')​      if (this.isExpanded()) {        Column({ space: 8 }) {          Text('断点策略')            .fontSize(15)            .fontWeight(FontWeight.Medium)            .fontColor('#111827')​          Text('expanded 状态下，操作区固定在右侧，卡片区域继续保持双列。这样可以减少宽屏下的视线跳转。')            .fontSize(14)            .fontColor('#6B7280')            .lineHeight(22)        }        .width('100%')        .padding(14)        .backgroundColor('#F9FAFB')        .borderRadius(16)      }    }    .width('100%')    .padding(16)    .backgroundColor('#FFFFFF')    .borderRadius(22)    .shadow({      radius: 10,      color: '#10000000',      offsetX: 0,      offsetY: 4    })  }​  @Builder  private CompactBottomAction() {    Column() {      Row({ space: 10 }) {        Button('处理 ' + this.getSelectedCard().title)          .fontSize(14)          .fontColor('#FFFFFF')          .height(44)          .layoutWeight(1)          .backgroundColor('#2F8F83')          .borderRadius(22)      }      .width('100%')      .padding({        left: this.getPagePadding(),        right: this.getPagePadding(),        top: 10,        bottom: 12      })      .backgroundColor('#F6F7F9')    }    .width('100%')  }​  build() {    Stack({ alignContent: Alignment.Bottom }) {      Column() {        Column({ space: 16 }) {          this.HeaderPanel()​          if (this.isExpanded()) {            Row({ space: 18 }) {              Column() {                this.CardGrid()              }              .layoutWeight(1)              .height('100%')​              Column() {                this.OperationPanel()              }              .width(280)              .height('100%')            }            .width('100%')            .layoutWeight(1)          } else {            Column({ space: 14 }) {              if (this.isMedium()) {                this.OperationPanel()              }​              this.CardGrid()            }            .width('100%')            .layoutWeight(1)          }        }        .width(this.getContentWidth())        .height('100%')        .padding({          left: this.getPagePadding(),          right: this.getPagePadding(),          top: 18,          bottom: this.isCompact() ? 74 : 16        })      }      .width('100%')      .height('100%')      .alignItems(HorizontalAlign.Center)​      if (this.isCompact()) {        this.CompactBottomAction()      }    }    .width('100%')    .height('100%')    .backgroundColor('#F6F7F9')    .onAreaChange((_: Area, newValue: Area) => {      const width = Number(newValue.width);      if (!Number.isNaN(width) && width > 0) {        this.pageWidth = width;      }    })  }}

关键实现点和运行结果

页面运行后，默认处于自动状态。此时断点完全由真实窗口宽度决定。Pura X Max 模拟器上，折叠态通常能看到 compact，展开态通常能看到 expanded。

为了观察三档效果，示例顶部增加了 compact、medium、expanded 三个演示按钮。点击 compact 后，内容容器会限制为 420vp，页面变成单列卡片，描述信息收起，主操作固定在底部。这个状态适合外屏、窄窗口或小尺寸悬浮窗。

点击 medium 后，内容容器限制为 720vp。页面卡片变成两列，描述信息开始出现，操作区移动到内容上方。这个状态在 Pura X Max 普通开合里不一定稳定出现，但在分屏、自由窗口、平板窄窗口里很常见，所以代码里保留它是有意义的。

点击 expanded 后，内容容器限制为 960vp。卡片区继续保持双列，操作区固定到右侧。这个状态接近展开态或更宽窗口，内容区和操作区分开之后，页面不需要把所有按钮都堆到列表下方。

核心判断都集中在 getLayoutMode()。

private getLayoutMode(): string {  const width = this.getEffectiveWidth();​  if (width >= this.expandedWidth) {    return 'expanded';  }​  if (width >= this.mediumWidth) {    return 'medium';  }​  return 'compact';}

真实项目里可以把 previewWidth 相关逻辑删掉，只保留 pageWidth。示例里加它，是为了让三种状态能在同一台模拟器上被直观看到。

private getEffectiveWidth(): number {  if (this.previewWidth > 0) {    return this.previewWidth;  }​  return this.pageWidth;}

迁移到项目中时，可以进一步把断点配置抽到统一文件里。

const BreakpointMedium = 600;const BreakpointExpanded = 900;

首页、列表页、详情页和设置页可以共用同一套断点，但每个页面在不同断点下做不同变化。首页可能调整卡片列数，详情页可能变成左右分栏，设置页可能从单列切换成左侧分类、右侧配置项。

断点不宜切得太碎。普通业务页面用 compact、medium、expanded 三档已经够用。状态越多，页面分支越多，后续维护成本也会变高。

总结

Pura X Max 的页面适配，适合从窗口宽度断点开始。

compact 负责窄窗口，medium 负责中间窗口，expanded 负责宽窗口。Pura X Max 模拟器最容易稳定验证 compact 和 expanded，medium 更适合作为兼容分屏、自由窗口、平板窄窗口和 2in1 的预留状态。

这样写的好处是页面不会被设备名称绑死。设备形态可以变化，窗口模式可以变化，业务页面也可以继续扩展。只要断点函数稳定，卡片列数、字号、边距和操作区位置都能围绕同一套规则调整。对折叠屏适配来说，窗口宽度比机型判断更适合作为布局入口。