前言

Pura X Max 展开态最容易出现的一类问题，是内容区域被直接撑满整屏。

列表页还能通过双列、三列解决一部分空间问题，阅读页、表单页、详情页就没这么简单了。标题、正文、输入框、说明文字一旦横向拉得太宽，用户读起来会很累。尤其是详情说明、识别结果、长文本摘要这类内容，宽度越大，视线移动越长，阅读效率反而下降。

Pura X Max 外屏为 5.4 英寸，内屏为 7.7 英寸，外屏分辨率为 1848 × 1264，内屏分辨率为 2584 × 1828，系统版本为 HarmonyOS 6.1。展开态带来的横向空间很明显，但这块空间不一定都要交给正文内容。

HarmonyOS 多设备适配里，页面元素会随着窗口尺寸变化调整布局，窗口尺寸变化较大时，也需要通过断点这类响应式能力调整页面结构。我在处理这类页面时，会同时控制两件事：页面边距和内容最大宽度。外屏保持紧凑，展开态让内容居中，并限制阅读区域宽度。

问题出在内容跟着屏幕无限变宽

很多详情页一开始会写成这样：

Column() {  // 标题  // 正文  // 表单}.width('100%').padding(16)

这在手机上没有问题。屏幕窄，width('100%') 加上 16vp 边距后，正文宽度仍然处在一个比较舒服的范围里。

到了 Pura X Max 展开态，同样的写法会把内容拉得很宽。正文每一行变长，表单输入框横向拉开，卡片也贴近屏幕两侧。页面看起来确实“占满了”，但可读性下降了。

这类页面和卡片工作台不同。工作台可以用多列提高信息密度，阅读页和表单页更需要控制宽度。大屏上应该给内容留出稳定的阅读范围，再把剩余空间交给留白、辅助信息、侧边操作或背景层次。

我通常会把页面拆成三层。

第一层是屏幕容器，占满窗口。

第二层是内容容器，根据窗口宽度设置边距和最大宽度。

第三层是真正的业务卡片、表单和正文。

这样处理后，页面在窄屏下仍然紧凑，展开态不会无限拉伸。

边距和最大宽度一起调整

单独调整 padding 不够。比如展开态把左右边距从 16vp 改成 32vp，内容仍然可能很宽。

单独设置最大宽度也不够。外屏下如果直接套一个固定最大宽度，页面会显得生硬，而且边缘空间不一定合适。

更稳的做法是让断点同时影响两件事。

compact 下，左右边距 16vp，内容宽度跟随窗口。

medium 下，左右边距 20vp，内容仍然尽量铺满可用区域。

expanded 下，左右边距 24vp 起步，同时把内容最大宽度限制在 760vp 左右。

判断逻辑可以保持简单：

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

内容宽度单独收束到一个函数里。

private getContentMaxWidth(): number {  if (this.isExpanded()) {    return 760;  }​  return this.getEffectiveWidth();}

这里的 760vp 不是硬标准。偏阅读的页面可以控制在 680vp 到 780vp；偏表单的页面可以根据字段长度放宽到 840vp；如果右侧还要放辅助面板，主内容区可以继续收窄。

把宽屏阅读区域跑起来

下面这个页面模拟了一个材料详情页，包含标题、摘要、正文和表单区域。页面顶部提供了“铺满”和“受控”两种模式，方便直接对比宽屏下的阅读体验。选择“受控”后，展开态内容会居中，并限制最大宽度；选择“铺满”后，内容会跟随窗口横向撑开。

页面可以放到 entry/src/main/ets/pages/Index.ets 运行。Pura X Max 适配调试可以使用 DevEco Studio 6.1.0，并安装对应模拟器验证外屏和展开态表现。

interface DetailBlock {  id: number;  title: string;  content: string;}​@Entry@Componentstruct Index {  @State private pageWidth: number = 0;  @State private previewWidth: number = 0;  @State private controlledWidth: boolean = true;​  private readonly mediumWidth: number = 600;  private readonly expandedWidth: number = 900;  private readonly maxReadableWidth: number = 760;​  private readonly blocks: DetailBlock[] = [    {      id: 1,      title: '整理结果',      content: '识别结果显示，这是一条社区物业缴费提醒。主要信息包括缴费周期、缴费金额、截止时间、办理地点和联系方式。外屏下适合快速浏览标题和状态，展开态下适合查看完整说明。'    },    {      id: 2,      title: '处理建议',      content: '这类提醒更适合保存为待办事项，并在截止日期前一天触发提醒。如果用户已经处理过，可以把记录标记为已完成，避免后续重复提醒。'    },    {      id: 3,      title: '适配观察',      content: '当内容区域在展开态下无限拉宽时，正文每一行会变得很长。阅读长文本时，眼睛需要横向移动更远，页面虽然占满了屏幕，但阅读体验会变差。'    }  ];​  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 getPagePadding(): number {    if (this.isExpanded()) {      return 24;    }​    if (this.isMedium()) {      return 20;    }​    return 16;  }​  private getTitleSize(): number {    if (this.isExpanded()) {      return 30;    }​    if (this.isMedium()) {      return 26;    }​    return 23;  }​  private getModeText(): string {    if (this.isExpanded()) {      return 'expanded · 宽窗口';    }​    if (this.isMedium()) {      return 'medium · 中等窗口';    }​    return 'compact · 窄窗口';  }​  private getModeDesc(): string {    if (!this.controlledWidth) {      return '当前内容区域跟随窗口铺满，宽屏下正文行长会明显增加。';    }​    if (this.isExpanded()) {      return '当前内容区域已限制最大宽度，展开态下正文居中显示，左右保留舒适留白。';    }​    return '当前窗口宽度有限，内容区域保持紧凑显示。';  }​  private getContentWidth(): Length {    if (!this.controlledWidth) {      return '100%';    }​    if (this.isExpanded()) {      return this.maxReadableWidth;    }​    return '100%';  }​  private getPreviewContainerWidth(): Length {    if (this.previewWidth > 0) {      return this.previewWidth;    }​    return '100%';  }​  private getBodyLineHeight(): number {    if (this.isExpanded()) {      return 25;    }​    return 23;  }​  private setPreview(width: number) {    this.previewWidth = width;  }​  private setWidthMode(controlled: boolean) {    this.controlledWidth = controlled;  }​  @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('外屏', 430)        this.PreviewButton('中宽', 720)        this.PreviewButton('展开态', 1040)      }      .width('100%')​      Row({ space: 8 }) {        this.WidthModeButton('受控宽度', true)        this.WidthModeButton('铺满宽度', false)      }      .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 WidthModeButton(text: string, controlled: boolean) {    Text(text)      .fontSize(12)      .fontColor(this.controlledWidth === controlled ? '#FFFFFF' : '#7C3AED')      .textAlign(TextAlign.Center)      .padding({ left: 10, right: 10, top: 7, bottom: 7 })      .backgroundColor(this.controlledWidth === controlled ? '#7C3AED' : '#F1EAFE')      .borderRadius(999)      .onClick(() => {        this.setWidthMode(controlled);      })  }​  @Builder  private SummaryCard() {    Column({ space: 12 }) {      Row() {        Text('材料详情')          .fontSize(18)          .fontWeight(FontWeight.Bold)          .fontColor('#111827')​        Blank()​        Text('待处理')          .fontSize(12)          .fontColor('#B25E00')          .padding({ left: 8, right: 8, top: 4, bottom: 4 })          .backgroundColor('#FFF4E5')          .borderRadius(999)      }      .width('100%')​      Text('社区物业缴费提醒')        .fontSize(this.isExpanded() ? 26 : 22)        .fontWeight(FontWeight.Bold)        .fontColor('#111827')        .lineHeight(this.isExpanded() ? 34 : 29)​      Text('这是一条来自拍照整理的通知类材料。页面用于观察宽屏下正文区域和表单区域的宽度变化。')        .fontSize(15)        .fontColor('#4B5563')        .lineHeight(23)​      Row({ space: 8 }) {        this.MetaPill('拍照整理')        this.MetaPill('通知')        this.MetaPill('09:20')      }      .width('100%')    }    .width('100%')    .padding(this.isExpanded() ? 20 : 16)    .backgroundColor('#FFFFFF')    .borderRadius(22)    .shadow({      radius: 10,      color: '#10000000',      offsetX: 0,      offsetY: 4    })  }​  @Builder  private MetaPill(text: string) {    Text(text)      .fontSize(12)      .fontColor('#4B5563')      .padding({ left: 8, right: 8, top: 4, bottom: 4 })      .backgroundColor('#F3F4F6')      .borderRadius(999)  }​  @Builder  private TextBlock(block: DetailBlock) {    Column({ space: 8 }) {      Text(block.title)        .fontSize(17)        .fontWeight(FontWeight.Medium)        .fontColor('#111827')​      Text(block.content)        .fontSize(15)        .fontColor('#4B5563')        .lineHeight(this.getBodyLineHeight())    }    .width('100%')    .padding(this.isExpanded() ? 20 : 16)    .backgroundColor('#FFFFFF')    .borderRadius(20)    .border({      width: 1,      color: '#E5E7EB'    })  }​  @Builder  private FormCard() {    Column({ space: 14 }) {      Text('处理表单')        .fontSize(18)        .fontWeight(FontWeight.Bold)        .fontColor('#111827')​      Column({ space: 8 }) {        Text('提醒标题')          .fontSize(13)          .fontColor('#6B7280')​        TextInput({ text: '社区物业缴费提醒' })          .height(42)          .fontSize(15)          .backgroundColor('#F9FAFB')          .borderRadius(14)      }      .width('100%')​      Column({ space: 8 }) {        Text('处理备注')          .fontSize(13)          .fontColor('#6B7280')​        TextArea({ text: '缴费前一天提醒，并确认是否已经完成支付。' })          .height(this.isExpanded() ? 88 : 76)          .fontSize(15)          .backgroundColor('#F9FAFB')          .borderRadius(14)      }      .width('100%')​      Button('保存处理结果')        .height(44)        .fontSize(15)        .fontColor('#FFFFFF')        .width('100%')        .backgroundColor('#2F8F83')        .borderRadius(22)    }    .width('100%')    .padding(this.isExpanded() ? 20 : 16)    .backgroundColor('#FFFFFF')    .borderRadius(22)    .shadow({      radius: 10,      color: '#10000000',      offsetX: 0,      offsetY: 4    })  }​  @Builder  private ContentArea() {    Scroll() {      Column({ space: 14 }) {        this.SummaryCard()​        ForEach(this.blocks, (block: DetailBlock) => {          this.TextBlock(block)        }, (block: DetailBlock) => block.id.toString())​        this.FormCard()      }      .width('100%')      .padding({ bottom: 24 })    }    .layoutWeight(1)    .width('100%')    .edgeEffect(EdgeEffect.Spring)  }​  build() {    Column() {      Column({ space: 16 }) {        this.HeaderPanel()​        Column() {          this.ContentArea()        }        .width(this.getContentWidth())        .layoutWeight(1)      }      .width(this.getPreviewContainerWidth())      .height('100%')      .padding({        left: this.getPagePadding(),        right: this.getPagePadding(),        top: 18,        bottom: 16      })      .alignItems(HorizontalAlign.Center)    }    .width('100%')    .height('100%')    .alignItems(HorizontalAlign.Center)    .backgroundColor('#F6F7F9')    .onAreaChange((_: Area, newValue: Area) => {      const width = Number(newValue.width);      if (!Number.isNaN(width) && width > 0) {        this.pageWidth = width;      }    })  }}

关键实现点和运行结果

页面运行后，先选择展开态，再分别点击铺满宽度和受控宽度。铺满宽度下，正文卡片和表单会横向拉满整个内容区域，输入框也会变得很长。受控宽度下，内容区域会居中，宽度限制在 760vp，左右留白明显增加，阅读线条更短。

外屏状态下，页面仍然保持紧凑。左右边距是 16vp，内容宽度跟随窗口，不会因为最大宽度设置造成额外留白。中宽状态下，页面边距变成 20vp，内容仍然尽量利用当前空间。展开态下，页面边距变成 24vp，内容最大宽度开始生效。

这里最重要的是 getContentWidth()。

private getContentWidth(): Length {  if (!this.controlledWidth) {    return '100%';  }​  if (this.isExpanded()) {    return this.maxReadableWidth;  }​  return '100%';}

它把宽屏下的阅读区域限制住。展开态不是让正文撑满屏幕，而是让正文保持在更适合阅读的宽度里。

页面边距由 getPagePadding() 控制。

private getPagePadding(): number {  if (this.isExpanded()) {    return 24;  }​  if (this.isMedium()) {    return 20;  }​  return 16;}

最大宽度和边距配合起来，页面在三种状态下会有不同表现：窄屏优先利用空间，中宽增加呼吸感，宽屏控制阅读宽度。

真实项目里，演示按钮可以删掉，只保留 pageWidth 和断点判断。详情页、表单页、文章页、识别结果页都适合用这种方式处理。尤其是 OCR 结果、会议纪要、合同条款、长说明文本，如果不限制宽度，展开态很容易变成“看起来很大，读起来很累”。

这个方案也有边界。统计卡片、图片瀑布流、看板入口这类页面，不一定需要限制最大内容宽度，它们更适合用多列布局提高信息密度。最大内容宽度更适合文本、表单和详情阅读场景。

总结

Pura X Max 展开态的页面适配，不能只关注内容有没有填满屏幕。

阅读页、详情页和表单页更需要控制内容宽度。外屏保持紧凑，展开态增加边距并限制最大内容宽度，页面会更稳定，也更适合长文本阅读和表单填写。

实际开发中，可以把页面分成屏幕容器、内容容器和业务内容三层。屏幕容器负责占满窗口，内容容器负责边距和最大宽度，业务内容只关心自身结构。这样写出来的页面，在外屏、展开态、分屏和 2in1 上都更容易保持一致的阅读体验。