HarmonyOS 6 | Pura X Max 鸿蒙原生适配 08：大屏下操作按钮位置重排

在普通手机页面里，底部固定按钮几乎是默认选择。用户从上往下看内容，最后在底部点击保存、提交、确认，这个路径很顺。外屏尺寸有限，底部按钮也比较容易触达。可到了 Pura X Max 展开态，同样的设计就开始别扭了。内容在页面上半部分，表单在中间区域，按钮却还停在屏幕底部。用户看完内容以后，要把视线拉到底部，再把手指移动过去，操作路径明显变长。

小雨青年

109人浏览 · 2026-05-19 14:05:17

小雨青年 · 2026-05-19 14:05:17 发布

前言

我在适配 Pura X Max 的详情页和编辑页时，发现一个很容易被忽略的问题：页面变宽以后，底部按钮反而变得不好用了。

Pura X Max 外屏为 5.4 英寸，内屏为 7.7 英寸，外屏分辨率为 1848 × 1264，内屏分辨率为 2584 × 1828，系统版本为 HarmonyOS 6.1。这个设备的展开态不是普通手机页面的简单放大，很多页面结构都需要重新看一遍，尤其是详情、编辑、审核、确认这类带主操作的页面。

我现在更倾向于把按钮位置当成页面结构的一部分来处理。外屏下，主操作继续放在底部；展开态下，主操作移动到右侧，让按钮靠近内容、表单和当前状态。这个改动看起来只是按钮换了位置，实际影响的是用户在大屏上的阅读路径和操作距离。

一、按钮离内容太远

小屏页面为什么喜欢底部按钮，本质上是因为用户的阅读路径和操作区域都集中在一个窄窗口里。

页面宽度有限时，内容从上往下走。底部固定按钮可以一直露出，用户不用滚到底，也不用到页面里找按钮。很多表单页、详情处理页、订单确认页都会这么做。这个方案在外屏里仍然成立，尤其是保存、提交、确认这类单一主操作，放在底部很稳定。

但展开态的空间关系变了。

内容区域通常在左侧或中上部，表单输入区可能在页面中间，底部固定按钮却横跨整个屏幕。页面越宽，这个按钮越像一条很重的底部栏。用户阅读内容和执行操作之间会被拉开。

这个问题在编辑页里更明显。用户正在处理备注、标题、识别结果，保存按钮还停在最底部。填完以后还要把视线移开，确认按钮位置，再进行点击。这个过程不算复杂，但在大屏上会显得拖沓。

我后来处理这类页面时，会先问一个问题：这个按钮到底应该服务谁？

如果按钮服务的是当前内容，那它应该靠近内容。如果按钮服务的是当前表单，那它应该靠近表单。如果按钮是整个页面的最终确认，在小屏下放底部没问题；到了展开态，放在右侧操作区会更稳定。

鸿蒙现在的窗口状态也比单一手机时代复杂。全屏、分屏、自由窗口都会改变应用可用区域。页面不能只按设备名称判断，还要看当前窗口是否真的适合右侧操作区。窗口模式变化会带来窗口尺寸变化，页面布局也要跟着调整。

二、外屏贴底

外屏下，我还是会保留底部固定按钮。

原因很直接。外屏宽度有限，内容和操作基本都在一条纵向路径上。用户读完内容以后，底部主按钮离手指更近。这个时候如果强行把按钮放到页面右侧，反而会破坏原来的单手操作习惯。

在实现上，外屏可以继续使用 Stack。内容区域在下方预留空间，底部操作条覆盖在页面底部。这里最容易漏的是内容底部留白。如果不留出来，用户滚动到底部时，最后一段内容或输入框会被按钮挡住。

小屏结构大概是这样：

Stack({ alignContent: Alignment.Bottom }) {
  // 页面内容区域

  // 底部固定操作条
}

底部固定按钮不是问题本身。问题出在没有区分窗口状态。外屏下它是合理的，展开态里继续使用它才会让操作距离变长。

所以我的处理思路是：小屏保留底部操作条，大屏切到右侧操作栏。布局状态变了，业务动作不变。保存仍然是保存，稍后处理仍然是稍后处理，只是它们在不同窗口下出现在更合适的位置。

三、大屏靠右

展开态下，我会把页面拆成两个区域。

左侧是内容区。它负责展示标题、摘要、识别内容、备注输入等主要内容。

右侧是操作区。它负责展示当前状态、主按钮、次要按钮，以及少量和操作相关的信息，比如保存次数、当前记录状态、是否已处理。

这里有一个取舍：右侧操作栏不能太宽。它不是新的详情页，也不是设置面板，只是承接当前页面的操作。一般 280vp 到 320vp 已经够用。如果右侧栏太宽，会反过来挤压内容区，展开态就失去了意义。

我也不会只用一个固定阈值判断是否进入右侧操作栏。之前我遇到过类似问题：窗口宽度看起来已经到达展开态，但右侧栏、间距、外层 padding 加起来以后，内容区实际已经很窄。这个时候强行分栏，页面会被挤得很难看。

更稳的写法是先算能不能放下。

private readonly wideThreshold: number = 860;
private readonly actionPanelWidth: number = 300;
private readonly minContentWidth: number = 430;
private readonly twoColumnGap: number = 16;

private canUseSideAction(): boolean {
  const availableWidth = this.getEffectiveWidth() - this.getPagePadding() * 2;
  const requiredWidth = this.minContentWidth + this.twoColumnGap + this.actionPanelWidth;
  return this.getEffectiveWidth() >= this.wideThreshold && availableWidth >= requiredWidth;
}

这个判断比单纯写 width >= 860 更可靠。它不会因为窗口刚刚超过阈值，就马上把页面拆成左右结构。只有当前可用宽度真的能放下内容区、间距和右侧操作栏时，页面才进入大屏布局。

这类细节在折叠屏适配里很重要。很多布局问题不是因为组件不会写，而是因为进入大屏布局的条件太粗。Pura X Max 的展开态确实更宽，但分屏、悬浮窗、模拟器窗口都会让实际可用宽度发生变化。写死阈值很容易在边界状态下翻车。

四、把页面跑起来

我把这个场景压成一个可以直接运行的 Index.ets 页面。示例模拟的是一条材料编辑记录：上方是材料摘要，中间是识别内容和处理备注，小屏下按钮固定在底部，大屏下按钮移动到右侧操作栏。

代码里保留了“自动”“外屏”“展开态”三个按钮，是为了在同一个模拟器里快速观察两种布局。放回真实项目时，可以删掉 previewWidth 和演示按钮，只保留真实窗口宽度判断。

interface DetailInfo {
  title: string;
  status: string;
  source: string;
  time: string;
  tag: string;
  summary: string;
  content: string;
}

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

  // 演示宽度，只用于在同一个模拟器里切换外屏和展开态效果
  @State private previewWidth: number = 0;

  // 模拟保存次数，方便观察按钮位置变化后状态是否仍然保留
  @State private saveCount: number = 0;

  // 模拟用户正在编辑的备注内容
  @State private noteText: string = '缴费前一天提醒，并确认是否已经完成支付。';

  // 进入右侧操作栏前，先判断可用空间是否真的放得下
  private readonly wideThreshold: number = 860;
  private readonly actionPanelWidth: number = 300;
  private readonly minContentWidth: number = 430;
  private readonly twoColumnGap: number = 16;

  private readonly detail: DetailInfo = {
    title: '社区物业缴费提醒',
    status: '待处理',
    source: '拍照整理',
    time: '09:20',
    tag: '通知',
    summary: '识别到物业费缴纳截止日期、金额明细和办理地点，建议保存为待办提醒。',
    content: '这条记录来自一张物业缴费通知。页面包含标题、摘要、识别内容和处理备注。外屏下，主按钮固定在底部，方便快速保存；展开态下，操作按钮移动到右侧，让用户在阅读内容和处理动作之间保持更短的距离。'
  };

  // 演示宽度优先级高于真实宽度，真实项目里可以删除 previewWidth 相关逻辑
  private getEffectiveWidth(): number {
    if (this.previewWidth > 0) {
      return this.previewWidth;
    }

    return this.pageWidth;
  }

  private getPagePadding(): number {
    return this.getEffectiveWidth() >= this.wideThreshold ? 24 : 16;
  }

  // 不只判断阈值，还要确认内容区、间距和操作栏是否真的能放下
  private canUseSideAction(): boolean {
    const availableWidth = this.getEffectiveWidth() - this.getPagePadding() * 2;
    const requiredWidth = this.minContentWidth + this.twoColumnGap + this.actionPanelWidth;
    return this.getEffectiveWidth() >= this.wideThreshold && availableWidth >= requiredWidth;
  }

  private isExpanded(): boolean {
    return this.canUseSideAction();
  }

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

    return '100%';
  }

  private getTitleSize(): number {
    return this.isExpanded() ? 28 : 23;
  }

  private getModeText(): string {
    return this.isExpanded() ? 'expanded · 右侧操作栏' : 'compact · 底部固定按钮';
  }

  private getModeDesc(): string {
    if (this.isExpanded()) {
      return '当前宽度足够，主操作移动到右侧，内容区和操作区保持在同一视线范围内。';
    }

    return '当前宽度更适合底部固定按钮，主操作靠近外屏下方，便于单手触达。';
  }

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

  private save() {
    this.saveCount += 1;
  }

  @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(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 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() + '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)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })

      Row({ space: 8 }) {
        this.PreviewButton('自动', 0)
        this.PreviewButton('外屏', 430)
        this.PreviewButton('展开态', 980)
      }
      .width('100%')
    }
    .width('100%')
  }

  @Builder
  private SummaryCard() {
    Column({ space: 12 }) {
      Row() {
        this.StatusPill(this.detail.status)

        Blank()

        this.MetaPill(this.detail.tag)
      }
      .width('100%')

      Text(this.detail.title)
        .fontSize(this.isExpanded() ? 26 : 22)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
        .lineHeight(this.isExpanded() ? 34 : 29)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })

      Text(this.detail.summary)
        .fontSize(15)
        .fontColor('#4B5563')
        .lineHeight(23)

      Row({ space: 8 }) {
        this.MetaPill(this.detail.source)
        this.MetaPill(this.detail.time)
      }
      .width('100%')
    }
    .width('100%')
    .padding(this.isExpanded() ? 20 : 16)
    .backgroundColor('#FFFFFF')
    .borderRadius(22)
    .shadow({
      radius: 10,
      color: '#10000000',
      offsetX: 0,
      offsetY: 4
    })
  }

  @Builder
  private ContentCard() {
    Column({ space: 10 }) {
      Text('识别内容')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')

      Text(this.detail.content)
        .fontSize(15)
        .fontColor('#4B5563')
        .lineHeight(24)
    }
    .width('100%')
    .padding(this.isExpanded() ? 20 : 16)
    .backgroundColor('#FFFFFF')
    .borderRadius(22)
    .border({
      width: 1,
      color: '#E5E7EB'
    })
  }

  @Builder
  private EditCard() {
    Column({ space: 14 }) {
      Text('处理备注')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')

      TextArea({ text: this.noteText })
        .height(this.isExpanded() ? 116 : 92)
        .fontSize(15)
        .backgroundColor('#F9FAFB')
        .borderRadius(14)
        .padding({ left: 12, right: 12, top: 10, bottom: 10 })
        .onChange((value: string) => {
          this.noteText = value;
        })

      if (this.isExpanded()) {
        Text('展开态下，主操作交给右侧操作栏，表单区域只保留编辑内容。')
          .fontSize(14)
          .fontColor('#6B7280')
          .lineHeight(21)
      }
    }
    .width('100%')
    .padding(this.isExpanded() ? 20 : 16)
    .backgroundColor('#FFFFFF')
    .borderRadius(22)
    .shadow({
      radius: 10,
      color: '#10000000',
      offsetX: 0,
      offsetY: 4
    })
  }

  @Builder
  private ContentPanel() {
    Scroll() {
      Column({ space: 14 }) {
        this.SummaryCard()
        this.ContentCard()
        this.EditCard()
      }
      .width('100%')
      // 小屏底部有固定按钮，需要额外留出空间，避免内容被遮住
      .padding({ bottom: this.isExpanded() ? 20 : 88 })
    }
    .layoutWeight(1)
    .width('100%')
    .edgeEffect(EdgeEffect.Spring)
  }

  @Builder
  private ActionPanel() {
    Column({ space: 16 }) {
      Column({ space: 6 }) {
        Text('操作区')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#111827')

        Text('当前记录：' + this.detail.title)
          .fontSize(14)
          .fontColor('#4B5563')
          .lineHeight(21)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)

      Column({ space: 8 }) {
        Row() {
          Text('状态')
            .fontSize(13)
            .fontColor('#6B7280')

          Blank()

          this.StatusPill(this.detail.status)
        }
        .width('100%')

        Row() {
          Text('保存次数')
            .fontSize(13)
            .fontColor('#6B7280')

          Blank()

          Text(this.saveCount.toString() + ' 次')
            .fontSize(13)
            .fontColor('#111827')
        }
        .width('100%')
      }
      .width('100%')
      .padding(14)
      .backgroundColor('#F9FAFB')
      .borderRadius(16)

      Button('保存处理结果')
        .fontSize(15)
        .fontColor('#FFFFFF')
        .height(44)
        .width('100%')
        .backgroundColor('#2F8F83')
        .borderRadius(22)
        .onClick(() => {
          this.save();
        })

      Button('标记为已完成')
        .fontSize(15)
        .fontColor('#2F8F83')
        .height(44)
        .width('100%')
        .backgroundColor('#E6F4F1')
        .borderRadius(22)

      Button('稍后处理')
        .fontSize(15)
        .fontColor('#4B5563')
        .height(44)
        .width('100%')
        .backgroundColor('#F3F4F6')
        .borderRadius(22)

      Text('右侧操作栏只放主操作、少量次操作和当前状态。更多操作不适合继续堆在这里。')
        .fontSize(14)
        .fontColor('#6B7280')
        .lineHeight(22)

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

  @Builder
  private BottomActionBar() {
    Column() {
      Row({ space: 10 }) {
        Button('保存处理结果')
          .fontSize(15)
          .fontColor('#FFFFFF')
          .height(44)
          .layoutWeight(1)
          .backgroundColor('#2F8F83')
          .borderRadius(22)
          .onClick(() => {
            this.save();
          })

        Button('稍后')
          .fontSize(15)
          .fontColor('#2F8F83')
          .height(44)
          .width(92)
          .backgroundColor('#E6F4F1')
          .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: this.twoColumnGap }) {
              Column() {
                this.ContentPanel()
              }
              .layoutWeight(1)
              .height('100%')

              Column() {
                this.ActionPanel()
              }
              .width(this.actionPanelWidth)
              .height('100%')
            }
            .width('100%')
            .layoutWeight(1)
          } else {
            this.ContentPanel()
          }
        }
        .width(this.getContentWidth())
        .height('100%')
        .padding({
          left: this.getPagePadding(),
          right: this.getPagePadding(),
          top: 18,
          bottom: this.isExpanded() ? 16 : 0
        })
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)

      if (!this.isExpanded()) {
        this.BottomActionBar()
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F6F7F9')
    .onAreaChange((_: Area, newValue: Area) => {
      const width = Number(newValue.width);
      if (!Number.isNaN(width) && width > 0) {
        this.pageWidth = width;
      }
    })
  }
}

四、跑出来后的变化

外屏状态下，页面仍然是典型的纵向详情页。内容从上到下排列，底部一直保留“保存处理结果”和“稍后”两个操作。这里我特意给内容区域底部留了 88vp 的空间，因为底部固定按钮如果不预留位置，滚动到底部时很容易挡住备注区域。

展开态下，页面会变成左内容、右操作。保存、标记完成、稍后处理都移动到右侧。此时底部不再出现固定操作条，内容区域也不需要额外留出那么大的底部空间。右侧操作栏里保留状态和保存次数，用户在阅读内容时，可以一直看到当前记录的操作状态。

这段代码里，我没有只用 expandedWidth 判断大屏。canUseSideAction() 会先算出当前剩余宽度，确认内容区和右侧操作栏真的能放下，再进入右侧操作栏模式。这样写能避免一个常见问题：窗口刚超过断点，但右侧栏一出现，内容区马上被挤窄。

回到真实项目时，可以删掉 previewWidth、PreviewButton() 和顶部演示按钮。真实页面只需要保留 pageWidth、canUseSideAction() 和对应的布局分支。右侧操作栏里的按钮也要继续收敛，主操作保留一个，次操作保留一到两个，低频操作放进更多入口会更合适。