前言

我是在调一个材料预览页的时候注意到这个问题的。窗口切到 920 × 520vp 后，页面仍然按竖屏时的顺序往下排，上面是一块内容预览区，下面是识别结果和确认按钮。刚看第一眼，页面并没有出现明显错位，按钮也能点击，但预览区的高度已经被压得很低，原本应该优先呈现的内容只剩下一段不大的区域。

这类页面在 Pura X Max 展开态横屏里很常见。外屏下，上下结构通常可以接受，因为屏幕本来就是窄长形态，用户从上往下看内容，再到下方处理结果。到了展开态横屏，窗口宽度增加，高度减少，如果页面还继续上下堆叠，预览区会先被压缩，识别结果和操作按钮也会继续占在下面。横向空间已经出现，但页面区域之间的关系没有跟着调整。

我这次处理的页面类型主要包括：

• 图片预览页
• 拍照确认页
• OCR 识别结果页
• 材料整理结果页
• 详情确认页
• 带预览区和操作区的编辑页

这些页面有一个共同点：用户需要对照两块内容。左边或上面看原始内容，另一块区域确认识别结果、编辑结果或处理动作。窗口变宽以后，如果还把这两块内容上下放，用户就要在预览区和结果区之间反复移动视线。这个问题不是样式细节，调整几处间距或者字号解决不了。

这次适配基于下面这个环境展开：

• 设备形态：Pura X Max 阔折叠设备
• 系统版本：HarmonyOS 6.1
• 外屏尺寸：5.4 英寸
• 内屏尺寸：7.7 英寸
• 外屏分辨率：1848 × 1264
• 内屏分辨率：2584 × 1828
• 技术方向：窗口宽高比例判断、Row / Column 切换、预览区和操作区重排

我没有直接从设备方向入手。Pura X Max 可以完整展开，也可能处在分屏窗口里。设备处在横向状态时，应用窗口不一定有足够宽度承载左右结构。页面能不能把预览区和操作区放到一行里，最终还是要看当前窗口给了多少宽度、高度，以及右侧操作区出现后，左侧预览还能不能保住足够的展示面积。

一、旧结构在横向窗口里哪里不对

1.1 竖屏里这套写法没有问题

很多结果页最开始都是竖屏结构。比如拍照整理后的确认页，常见排布是上面放原图、文档或内容预览，中间放识别结果，下面放确认、重新识别、保存等操作按钮。这个结构在手机竖屏里能成立，主要原因是屏幕高度够，用户可以按顺序从上往下看，最后在底部完成处理。

用 ArkUI 写起来也很直接，一个 Column 就能把页面组织出来。

Column({ space: 14 }) {
  this.PreviewPanel()
  this.ActionPanel()
}

我一开始也会这么写。外屏下这套结构没有太大问题，内容和操作都按纵向展开，用户读完内容后继续看结果，最后点按钮。它的开发成本也低，页面状态不用拆来拆去，后续维护比较省事。

麻烦出现在横向宽窗口里。窗口宽度增加，高度减少后，原来的上下结构继续存在，预览区就会被挤到一个很尴尬的高度。这个时候继续调卡片内边距、圆角、标题字号，最多只能改善一点局部观感，页面真正的问题仍然在区域关系上。

1.2 我在截图里看到的是预览区变矮

我把演示窗口切到 920 × 520vp 后，最先注意到的是预览卡片的高度不够。原本应该承载主要内容的区域，被上下结构压成了一块偏矮的卡片。下面的识别结果和操作按钮还按竖屏时的方式排列，占着底部空间。

这个状态下，用户如果只是点一下保存，问题还不算大；但如果需要对照原文和识别结果，就会变得别扭。用户要先看上面的预览，再到下面确认结果，如果发现结果和原文不一致，还得回到上面重新看。这种来回切换在竖屏里还可以接受，在横向宽窗口里就显得浪费空间。

我在这类页面里通常会先看四个点：

• 预览区是否还能承担主内容
• 识别结果是否需要和预览内容对照
• 操作按钮是否继续压在底部
• 当前窗口是否足够放下左右两块区域

只要预览和结果存在对照关系，横屏下就值得考虑左右结构。左侧保留原内容，右侧放识别结果和操作按钮，用户在同一段视线范围里完成确认，不需要在上下两块区域之间来回移动。

二、我没有直接读设备方向

2.1 设备方向只能提供背景

横屏适配很容易从设备方向入手。设备处在横向状态，就进入横屏布局；设备回到竖向状态，就切回竖屏布局。这个写法在单一手机页面里还能接受，放到 Pura X Max 这种窗口状态更多的设备上，我会更谨慎。

Pura X Max 不只有完整外屏和完整内屏。应用可能在展开态全屏，也可能只占分屏的一半，还可能以自由窗口形式运行。设备方向给出的只是一个背景信息，页面实际可用空间仍然要看应用窗口本身。

我在分屏尺寸里试过类似页面。设备处在横向状态，应用窗口却没有足够宽度。右侧操作区刚出现，左侧预览马上被挤得很窄。这个时候如果继续按设备方向切布局，页面看起来进入了横屏结构，实际上预览内容比原来更难看清。

所以我把判断放到了窗口宽高比例上。这个选择不是为了多写一个函数，而是为了处理完整展开、分屏、自由窗口之间的中间状态。对结果页来说，能不能左右排，得看左侧预览和右侧操作能不能同时放下。

2.2 宽度和比例都要留余量

示例里的判断是这样写的：

private isLandscapeLayout(): boolean {
  const width = this.getEffectiveWidth();
  const height = this.getEffectiveHeight();

  return width >= 720 && width > height * 1.12;
}

这里没有只用一个宽度阈值来决定布局，而是把窗口宽度和宽高比例放在一起判断。窗口至少要有 720vp 的宽度，同时还要明显偏横向，这样右侧操作区出现以后，左侧预览区才不至于被压得太窄。

我在这个地方会偏保守一点。窗口刚刚超过某个宽度时，我不会马上切到左右结构，因为右侧操作区一旦出现，左侧预览可能只剩下一块很窄的区域。对预览页来说，主内容区域被挤掉，比继续使用上下结构更糟。

迁回真实项目时，我也会保留这种判断方式。设备形态只是背景，真正决定布局的还是当前窗口能给页面多少空间。这个判断以后还可以继续细化，比如把右侧操作区宽度、页面左右 padding、预览区最小宽度都算进去，但示例里先用宽度和比例两个条件，已经能避开大部分误切状态。

三、只改外层布局

3.1 竖屏继续上下排

竖屏下，我会继续保留 Column。竖屏的内容路径本来就是从上到下，预览区在上方，操作区在下方，用户扫完内容后继续处理识别结果。这个结构适合外屏、普通竖屏和窄窗口，没有必要为了横屏适配把所有状态都改成左右分栏。

Column({ space: 14 }) {
  Column() {
    this.PreviewPanel()
  }
  .height(360)
  .width('100%')

  Column() {
    this.ActionPanel()
  }
  .layoutWeight(1)
  .width('100%')
}

这里给预览区一个固定高度，操作区占剩余空间。外屏下这样排，不会把页面拆得太碎，也不会让操作区变成很窄的一列。尤其是用户单手操作时，上下结构比左右分栏更适合窄窗口。

这个地方我会保留一点重复判断。横屏适配不是把所有页面都切成左右结构，真正要处理的是宽窗口下预览区和操作区的关系。窄窗口里硬拆左右，预览和操作都会变窄，这种改法看起来像大屏适配，实际会让两个区域都不好用。

3.2 横屏再把操作区放到右侧

横屏下，结构换成 Row。

Row({ space: 16 }) {
  Column() {
    this.PreviewPanel()
  }
  .layoutWeight(1)
  .height('100%')

  Column() {
    this.ActionPanel()
  }
  .width(330)
  .height('100%')
}

左侧预览区使用 layoutWeight(1)，占主要空间。右侧操作区固定为 330vp，用来放识别结果和按钮。这个宽度不是固定标准，只是这个示例里比较合适的取值。

如果是图片预览页，右侧只有几个按钮，300vp 可能已经够用。如果右侧有字段、按钮、说明文本，可以放到 340vp 到 380vp。再往里继续塞长文本说明、完整编辑、历史记录，右侧区域就会挤占预览区，页面又会回到另一个问题上。

所以我会把右侧区域当成轻量处理区。它放识别结果、确认按钮、重新识别入口就够了。完整编辑、历史记录、长文本说明继续放到详情页或更大的面板里。左侧预览区不能被牺牲，这是这个布局能成立的前提。

3.3 业务状态不要拆开

这个改造里，业务数据不需要拆成两套。

预览还是同一个预览，识别结果还是同一组字段，确认按钮也还是原来的确认按钮。变化只发生在外层容器方向上。

我会尽量把变化控制在 UI 层。窗口比例变了，容器从 Column 换成 Row；业务数据、确认次数、识别结果都留在同一个页面状态里。真实项目里，这一点能省很多后续维护成本。为了一个横屏状态拆出两套数据处理逻辑，后面埋点、权限、错误提示、状态回填都会跟着变复杂。

页面布局可以切换，业务状态最好不要跟着拆散。这个判断在折叠屏适配里很常见，尤其是列表详情、预览确认、编辑保存这类页面，布局变了，用户正在处理的那条记录仍然应该保持不变。

四、跑一下两个状态

横屏布局这类问题，截图比文字更容易说明。我一般会先截一张竖屏状态，再截一张横屏状态，然后把两张图放在一起看。这样能直观看到预览区从上方移动到左侧，识别结果从下方移动到右侧，整个页面关系发生了变化。

竖屏状态下，页面按上下结构显示。上方是内容预览，下方是识别结果和操作按钮。这个状态适合外屏、窄窗口和普通竖屏场景。

横屏状态下，中间演示区域变成横向宽窗口。页面会从 Column 切换为 Row。左侧显示内容预览，右侧显示识别结果和确认按钮。

五、迁回项目时怎么处理

5.1 演示按钮要删掉

示例里有 previewWidth 和 previewHeight，它们只用于演示。

真实项目里不需要让用户点击“竖屏”“横屏”。页面应该直接根据真实窗口宽高变化切换布局。

示例里的写法是：

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

  return this.pageWidth;
}

迁回项目时可以简化成：

private getEffectiveWidth(): number {
  return this.pageWidth;
}

高度同理。

5.2 左右结构要挑页面

这个方案我会优先放在预览页、结果页、详情确认页里。这些页面天然有两个区域，一个是主内容，一个是辅助结果或操作。横屏时把它们左右并排，用户可以同时看到上下文和处理结果。

普通设置页、短列表页、单字段表单页就不一定要这样做。它们在横屏下可能只需要控制最大宽度、边距或信息密度。如果页面没有“对照关系”，强行左右分栏会显得多余。

这里我会再强调一下自己的取舍。横屏左右结构只适合有对照关系的页面。预览和结果、列表和详情、表单和说明，这些结构放在横向窗口里才有意义。没有这种关系的页面，继续控制内容宽度和边距，通常会比硬拆分栏更合适。

5.3 右侧区域只放处理内容

右侧操作区宽度也要控制。

示例里用了 330vp：

.width(330)

这个宽度适合放识别结果、少量字段和操作按钮。如果继续往里放长文本说明、完整编辑、历史记录，左侧预览会先被挤掉。

真实项目里，我一般会把右侧区域控制成轻量处理区。它可以放识别结果、主按钮、次按钮、少量说明。完整编辑、长文本、复杂表单还是进入独立页面或更大的面板。

我这里再重复一次自己的取舍。横屏切左右结构，前提是左侧预览不能被牺牲。如果右侧内容继续变多，我会先拆右侧内容，而不是继续压左侧预览区。

总结

Pura X Max 横屏适配，不能只看设备有没有旋转。预览页、结果页这类页面，要看主内容和操作区能不能在当前窗口里形成对照关系。竖屏下继续上下排列，横屏下切成左右结构，用户可以一边看原内容，一边确认识别结果。

我处理这类页面时，会把窗口宽高比例作为入口。宽度和比例都够，再切左右结构；空间不够，继续上下结构。这个判断比单纯读取设备方向更适合分屏、自由窗口和折叠屏展开态这些场景。

附：完整代码

interface ResultItem {
  id: number;
  label: string;
  value: string;
}

@Entry
@Component
struct Index {
  // 页面真实宽度，由 onAreaChange 写入
  @State private pageWidth: number = 0;

  // 页面真实高度，由 onAreaChange 写入
  @State private pageHeight: number = 0;

  // 演示宽度，只用于在同一个模拟器里观察竖屏和横屏差异
  @State private previewWidth: number = 0;

  // 演示高度，只用于配合 previewWidth 模拟不同宽高比例
  @State private previewHeight: number = 0;

  // 模拟确认次数，用来观察操作区状态是否保留
  @State private confirmCount: number = 0;

  private readonly resultItems: ResultItem[] = [
    {
      id: 1,
      label: '材料类型',
      value: '社区物业缴费提醒'
    },
    {
      id: 2,
      label: '截止日期',
      value: '2026 年 5 月 28 日'
    },
    {
      id: 3,
      label: '处理建议',
      value: '添加缴费提醒，并在截止日前一天通知'
    },
    {
      id: 4,
      label: '来源方式',
      value: '拍照整理'
    }
  ];

  // Demo 中优先使用演示宽度，真实项目里可以直接返回 pageWidth
  private getEffectiveWidth(): number {
    if (this.previewWidth > 0) {
      return this.previewWidth;
    }

    return this.pageWidth;
  }

  // Demo 中优先使用演示高度，真实项目里可以直接返回 pageHeight
  private getEffectiveHeight(): number {
    if (this.previewHeight > 0) {
      return this.previewHeight;
    }

    return this.pageHeight;
  }

  // 用窗口宽高比例判断布局方向，处理分屏和自由窗口里的中间尺寸
  private isLandscapeLayout(): boolean {
    const width = this.getEffectiveWidth();
    const height = this.getEffectiveHeight();

    return width >= 720 && width > height * 1.12;
  }

  private getContentWidth(): Length {
    if (this.previewWidth > 0) {
      return this.previewWidth;
    }

    return '100%';
  }

  private getContentHeight(): Length {
    if (this.previewHeight > 0) {
      return this.previewHeight;
    }

    return '100%';
  }

  private getPagePadding(): number {
    return this.isLandscapeLayout() ? 20 : 16;
  }

  private getTitleSize(): number {
    return this.isLandscapeLayout() ? 26 : 23;
  }

  private getModeText(): string {
    return this.isLandscapeLayout() ? 'landscape · 左右结构' : 'portrait · 上下结构';
  }

  private getModeDesc(): string {
    if (this.isLandscapeLayout()) {
      return '当前窗口采用横向布局，预览区放左侧，操作区放右侧。';
    }

    return '当前窗口采用纵向布局，预览区在上方，操作区在下方。';
  }

  private setPreview(width: number, height: number) {
    this.previewWidth = width;
    this.previewHeight = height;
  }

  private confirm() {
    this.confirmCount += 1;
  }

  @Builder
  private PreviewButton(text: string, width: number, height: number) {
    Text(text)
      .fontSize(12)
      .fontColor(this.previewWidth === width && this.previewHeight === height ? '#FFFFFF' : '#2F8F83')
      .textAlign(TextAlign.Center)
      .padding({ left: 10, right: 10, top: 7, bottom: 7 })
      .backgroundColor(this.previewWidth === width && this.previewHeight === height ? '#2F8F83' : '#E6F4F1')
      .borderRadius(999)
      .onClick(() => {
        this.setPreview(width, height);
      })
  }

  @Builder
  private HeaderPanel() {
    Column({ space: 10 }) {
      Row({ space: 10 }) {
        Column({ space: 4 }) {
          Text('横屏下页面从上下结构改为左右结构')
            .fontSize(this.getTitleSize())
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })

          Text(this.getModeText())
            .fontSize(14)
            .fontColor('#2F8F83')
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
        .layoutWeight(1)

        Text(Math.round(this.pageWidth).toString() + ' × ' + Math.round(this.pageHeight).toString())
          .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() + ' × ' + Math.round(this.getEffectiveHeight()).toString() + 'vp。' + this.getModeDesc())
        .fontSize(14)
        .fontColor('#6B7280')
        .lineHeight(21)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })

      Row({ space: 8 }) {
        this.PreviewButton('自动', 0, 0)
        this.PreviewButton('竖屏', 430, 760)
        this.PreviewButton('横屏', 920, 520)
      }
      .width('100%')
    }
    .width('100%')
  }

  @Builder
  private StatusPill(text: string) {
    Text(text)
      .fontSize(12)
      .fontColor('#B25E00')
      .padding({ left: 8, right: 8, top: 4, bottom: 4 })
      .backgroundColor('#FFF4E5')
      .borderRadius(999)
  }

  @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 PreviewPanel() {
    Column({ space: 12 }) {
      Row() {
        Text('内容预览')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#111827')

        Blank()

        this.StatusPill('待确认')
      }
      .width('100%')

      Column({ space: 12 }) {
        Text('物业缴费提醒')
          .fontSize(this.isLandscapeLayout() ? 24 : 22)
          .fontWeight(FontWeight.Bold)
          .fontColor('#111827')

        Text('尊敬的业主：本期物业服务费缴纳截止日期为 2026 年 5 月 28 日。请在截止日期前完成缴费，避免影响后续服务办理。')
          .fontSize(15)
          .fontColor('#4B5563')
          .lineHeight(24)

        Column({ space: 8 }) {
          this.PreviewLine('缴费周期', '2026 年 4 月 - 2026 年 6 月')
          this.PreviewLine('应缴金额', '¥ 680.00')
          this.PreviewLine('办理地点', '社区物业服务中心一楼')
        }
        .width('100%')
        .padding(14)
        .backgroundColor('#F9FAFB')
        .borderRadius(16)
      }
      .width('100%')
      .layoutWeight(1)
      .padding(this.isLandscapeLayout() ? 18 : 16)
      .backgroundColor('#FFFFFF')
      .borderRadius(20)
      .border({
        width: 1,
        color: '#E5E7EB'
      })
    }
    .width('100%')
    .height('100%')
    .padding(this.isLandscapeLayout() ? 18 : 16)
    .backgroundColor('#FFFFFF')
    .borderRadius(24)
    .shadow({
      radius: 12,
      color: '#12000000',
      offsetX: 0,
      offsetY: 4
    })
  }

  @Builder
  private PreviewLine(label: string, value: string) {
    Row() {
      Text(label)
        .fontSize(13)
        .fontColor('#6B7280')

      Blank()

      Text(value)
        .fontSize(13)
        .fontColor('#111827')
        .fontWeight(FontWeight.Medium)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('100%')
  }

  @Builder
  private ResultRow(item: ResultItem) {
    Column({ space: 4 }) {
      Text(item.label)
        .fontSize(12)
        .fontColor('#9CA3AF')

      Text(item.value)
        .fontSize(14)
        .fontColor('#374151')
        .lineHeight(20)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('100%')
    .padding(12)
    .backgroundColor('#F9FAFB')
    .borderRadius(14)
  }

  @Builder
  private ActionPanel() {
    Column({ space: 14 }) {
      Row() {
        Text('识别结果')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#111827')

        Blank()

        this.MetaPill('拍照整理')
      }
      .width('100%')

      Text('横屏时，右侧区域用于展示识别结果和操作按钮。用户可以一边看左侧原内容，一边确认右侧整理结果。')
        .fontSize(14)
        .fontColor('#6B7280')
        .lineHeight(22)

      Column({ space: 10 }) {
        ForEach(this.resultItems, (item: ResultItem) => {
          this.ResultRow(item)
        }, (item: ResultItem) => item.id.toString())
      }
      .width('100%')

      Column({ space: 8 }) {
        Text('确认次数：' + this.confirmCount.toString())
          .fontSize(13)
          .fontColor('#6B7280')

        Button('确认并保存')
          .fontSize(15)
          .fontColor('#FFFFFF')
          .height(44)
          .width('100%')
          .backgroundColor('#2F8F83')
          .borderRadius(22)
          .onClick(() => {
            this.confirm();
          })

        Button('重新识别')
          .fontSize(15)
          .fontColor('#2F8F83')
          .height(44)
          .width('100%')
          .backgroundColor('#E6F4F1')
          .borderRadius(22)
      }
      .width('100%')

      Blank()
    }
    .width('100%')
    .height('100%')
    .padding(this.isLandscapeLayout() ? 18 : 16)
    .backgroundColor('#FFFFFF')
    .borderRadius(24)
    .shadow({
      radius: 12,
      color: '#12000000',
      offsetX: 0,
      offsetY: 4
    })
  }

  @Builder
  private MainContent() {
    if (this.isLandscapeLayout()) {
      Row({ space: 16 }) {
        Column() {
          this.PreviewPanel()
        }
        .layoutWeight(1)
        .height('100%')

        Column() {
          this.ActionPanel()
        }
        .width(330)
        .height('100%')
      }
      .width('100%')
      .height('100%')
    } else {
      Column({ space: 14 }) {
        Column() {
          this.PreviewPanel()
        }
        .height(360)
        .width('100%')

        Column() {
          this.ActionPanel()
        }
        .layoutWeight(1)
        .width('100%')
      }
      .width('100%')
      .height('100%')
    }
  }

  build() {
    Column() {
      Column({ space: 16 }) {
        this.HeaderPanel()

        Column() {
          this.MainContent()
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width(this.getContentWidth())
      .height(this.getContentHeight())
      .padding({
        left: this.getPagePadding(),
        right: this.getPagePadding(),
        top: 18,
        bottom: 16
      })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#F6F7F9')
    .onAreaChange((_: Area, newValue: Area) => {
      const width = Number(newValue.width);
      const height = Number(newValue.height);

      if (!Number.isNaN(width) && width > 0) {
        this.pageWidth = width;
      }

      if (!Number.isNaN(height) && height > 0) {
        this.pageHeight = height;
      }
    })
  }
}