HarmonyOS7 平板双栏布局真的很香：列表和详情别再来回跳

TimerHero

226人浏览 · 2026-07-28 09:34:22

TimerHero · 2026-07-28 09:34:22 发布

为一篇讲解 HarmonyOS7 平板双栏布局的文章绘制一张手绘笔记风信息图。主题是“平板双栏布局真

文章目录

前言

邮件页、消息页、设置页在手机上用单列没问题。点列表，进详情，再返回列表，这是窄屏下很自然的路径。

但到了平板上，如果还让用户这样来回跳，就有点浪费空间了。左边明明可以一直放列表，右边直接展示详情，用户处理连续信息时会轻松很多。

双栏布局的价值不是多塞内容，而是减少不必要的页面跳转。

为什么这个问题经常被写乱

平板双栏布局真的很香这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。

所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。

双栏到底解决什么问题

为一篇关于 HarmonyOS7 平板双栏页面状态设计的文章绘制一张手绘蓝图风框架图。画面中心是状态

双栏布局适合“左边选，右边看”的场景。它不是简单把两个页面拼在一起，而是重新安排信息关系。

页面	左栏适合放什么	右栏适合放什么
邮件	收件箱列表、搜索、分类	邮件正文和操作按钮
设置	设置分类	当前设置项详情
客服会话	会话列表	聊天记录和输入框
文件管理	文件夹树	文件预览和操作

为一篇讲解 HarmonyOS7 平板双栏布局实现流程的文章绘制一张手绘流程图。内容要体现实际使用路

这类页面有一个共同点：用户会连续切换列表项。如果每次都跳详情页，再返回列表，操作成本会很高。

状态设计先想清楚

双栏页面最关键的状态不是“右栏显示什么组件”，而是当前选中了哪条数据。

这个例子里用 selectedId 作为左右栏的连接点：左栏点击邮件时只改 selectedId，右栏根据 selectedId 找当前邮件。

状态	谁修改	谁读取
`selectedId`	左栏列表点击	左栏选中态、右栏详情
`mails`	页面数据源	左栏列表、右栏兜底
`currentMail()`	页面内部计算	右栏标题、发件人、正文

这样做有个好处：左栏不用知道右栏怎么渲染，右栏也不用知道用户点的是哪一行。两边都围绕同一个状态工作。

先把页面目标想清楚

在真正写代码之前，先别急着盯着 API。更有用的做法是先想清楚：这个页面到底想解决什么问题，用户最在意的反馈是什么，哪些状态必须一直保持一致。

当你先把这条主线想明白，再回头看组件和状态设计，很多选择都会顺理成章。对小白来说，这一步尤其重要，因为它能帮你从“照着抄”慢慢过渡到“看得懂、改得动”。

完整 ArkTS 示例

下面是一个平板邮件页。左边固定宽度展示收件箱，右边使用 layoutWeight(1) 吃掉剩余空间。

interface MailItem28 {
  id: number
  sender: string
  subject: string
  preview: string
}

@Entry
@Component
struct TabletMailPage28 {
  @State selectedId: number = 1
  private mails: MailItem28[] = [
    { id: 1, sender: '设计团队', subject: '平板版信息架构评审', preview: '请重点看双栏下的阅读效率。' },
    { id: 2, sender: '测试同学', subject: 'HarmonyOS7 适配问题汇总', preview: '折叠屏展开后列表间距正常。' },
    { id: 3, sender: '产品经理', subject: '下周版本排期', preview: '详情页需要保留操作入口。' }
  ]

  currentMail(): MailItem28 {
    const found = this.mails.find((item: MailItem28) => item.id === this.selectedId)
    return found ? found : this.mails[0]
  }

  @Builder
  MailRow(item: MailItem28) {
    Column({ space: 6 }) {
      Text(item.sender)
        .fontSize(14)
        .fontColor('#666666')
      Text(item.subject)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .maxLines(1)
      Text(item.preview)
        .fontSize(12)
        .fontColor('#888888')
        .maxLines(1)
    }
    .alignItems(HorizontalAlign.Start)
    .padding(14)
    .width('100%')
    .backgroundColor(this.selectedId === item.id ? '#EAF1FF' : '#FFFFFF')
    .borderRadius(10)
    .onClick(() => {
      this.selectedId = item.id
    })
  }

  build() {
    Row() {
      Column({ space: 12 }) {
        Text('收件箱')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .width('100%')
        ForEach(this.mails, (item: MailItem28) => {
          this.MailRow(item)
        }, (item: MailItem28) => item.id.toString())
      }
      .width(320)
      .height('100%')
      .padding(16)
      .backgroundColor('#F6F7F9')

      Divider()
        .vertical(true)
        .height('100%')
        .color('#E5E7EB')

      Column({ space: 16 }) {
        Text(this.currentMail().subject)
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
          .width('100%')
        Text(`来自：${this.currentMail().sender}`)
          .fontSize(14)
          .fontColor('#666666')
          .width('100%')
        Text('这封邮件用来演示平板双栏布局。左侧保持列表上下文，右侧直接展示详情，用户处理连续邮件时会轻松很多。')
          .fontSize(16)
          .lineHeight(26)
          .width('100%')
        Row({ space: 10 }) {
          Button('回复')
          Button('归档')
        }
        .width('100%')
      }
      .layoutWeight(1)
      .height('100%')
      .padding(24)
      .backgroundColor('#FFFFFF')
    }
    .width('100%')
    .height('100%')
  }
}