前言

我在做 Pura X Max 适配时，最先暴露问题的不是复杂页面，而是最普通的列表页。

手机上正常的一列卡片，放到展开态内屏之后，页面马上显得空。卡片被横向拉宽，一屏看到的记录数量没有增加，内容阅读也没有变舒服。用户打开的是一块更大的屏幕，但页面只是被撑开了。

Pura X Max 的外屏为 5.4 英寸，内屏为 7.7 英寸，外屏分辨率为 1848 × 1264，内屏分辨率为 2584 × 1828，系统版本为 HarmonyOS 6.1。这样的尺寸变化，已经足够让列表页从单列结构切换到双列结构。

我这次没有按设备型号写判断，也没有给 Pura X Max 单独写一套页面。更稳的做法是把页面可用宽度作为判断条件。窗口窄的时候保持单列，窗口宽的时候切换双列。这样处理后，外屏、展开态、分屏窗口、平板窗口都能用同一套逻辑。

问题从列表页开始

很多应用的列表页，一开始都会写成单列结构。比如材料列表、会议列表、通知列表、记录列表，逻辑通常都很直接：一条数据对应一张卡片，从上到下排列。

这种写法在窄屏上没问题。外屏空间有限，单列更适合阅读，也更适合手指点击。

问题出在展开态。Pura X Max 内屏打开后，页面横向空间明显增加，如果仍然只放一列卡片，就会出现几个体验问题。

卡片宽度变大，但内容没有变多。

页面一屏展示的信息量没有提升。

用户需要继续上下滚动，展开态优势没有发挥出来。

左右空间被浪费，视觉上有一种被拉伸的感觉。

列表页适配的第一步，可以先把“单列固定展示”改成“随窗口宽度变化”。窗口宽度不足时保持单列，窗口宽度达到阈值后切换双列。这个改法很基础，但能明显改善展开态的页面密度。

用窗口宽度判断布局状态

我把页面分成两个状态。

compact 用于外屏、普通手机宽度、分屏后的窄窗口。这个状态下列表保持一列，优先保证阅读稳定和点击区域清楚。

expanded 用于展开态内屏或更宽的窗口。这个状态下列表切换成两列，一屏可以看到更多记录，页面也不会显得过空。

判断条件先控制得简单一点。

private readonly expandedWidth: number = 720;private isExpanded(): boolean {  return this.pageWidth >= this.expandedWidth;}

这里的 720vp 只是演示阈值。真实项目里要结合卡片最小宽度、页面边距、内容密度一起调整。比如卡片内容很短，可以把阈值调低一点；卡片包含较多摘要、按钮或标签，可以把阈值调高一点。

页面宽度通过 onAreaChange 记录。它会在布局变化导致组件尺寸或位置变化时触发，适合在页面根容器上感知当前可用宽度。

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

只要 pageWidth 更新，Grid 的列模板就可以跟着变化。

private getColumnsTemplate(): string {  return this.isExpanded() ? '1fr 1fr' : '1fr';}

这样写的好处是状态集中。标题字号、页面边距、卡片摘要、列表列数，都可以复用 isExpanded()。页面逻辑不会散在多个地方，后续要调整断点也比较方便。

把列表放到页面里跑一遍

为了让单列和双列差异更直观，我把页面压缩成一个独立的 Index.ets。里面模拟了几条信息整理记录，窄窗口下显示一列，展开态下显示两列。卡片内容也做了区分：compact 下收起摘要，expanded 下展示摘要，让大屏空间真正承载更多信息。

把下面内容放到 entry/src/main/ets/pages/Index.ets，选择 Pura X Max 模拟器运行即可。Pura X Max 的适配调试需要使用 6.1.0 版本 DevEco Studio，并安装对应模拟器验证应用表现。

interface DemoRecord {  id: number;  title: string;  source: string;  time: string;  tag: string;  status: string;  summary: string;}@Entry@Componentstruct Index {  @State private pageWidth: number = 0;  @State private selectedId: number = 1;  private readonly expandedWidth: number = 720;  private readonly records: DemoRecord[] = [    {      id: 1,      title: '社区物业缴费提醒',      source: '拍照整理',      time: '09:20',      tag: '通知',      status: '已整理',      summary: '识别到物业缴费截止日期、费用明细和办理地点，适合保存到待办或提醒。'    },    {      id: 2,      title: '会议纪要：Pura X Max 适配',      source: '语音转写',      time: '10:45',      tag: '会议',      status: '待确认',      summary: '整理出外屏、展开态、横屏和悬停态几类页面适配任务，便于后续进入原型调整。'    },    {      id: 3,      title: '活动报名确认单',      source: '相册导入',      time: '11:30',      tag: '表单',      status: '已保存',      summary: '提取到报名人、联系方式、活动时间和签到地址，可作为后续行程提醒。'    },    {      id: 4,      title: '客户需求变更记录',      source: '文本整理',      time: '13:10',      tag: '项目',      status: '已整理',      summary: '本次变更涉及首页布局、权限配置和通知策略，需要同步到开发任务列表。'    },    {      id: 5,      title: '课程作业提交说明',      source: '拍照整理',      time: '15:25',      tag: '学习',      status: '待处理',      summary: '识别到提交截止时间、文件格式要求和命名规范，建议添加到待办。'    },    {      id: 6,      title: '门诊复查预约提示',      source: '相册导入',      time: '16:40',      tag: '提醒',      status: '已保存',      summary: '提取到预约时间、科室和注意事项，后续可加入日程提醒。'    }  ];  private isExpanded(): boolean {    return this.pageWidth >= this.expandedWidth;  }  private getColumnsTemplate(): string {    return this.isExpanded() ? '1fr 1fr' : '1fr';  }  private getPagePadding(): number {    return this.isExpanded() ? 24 : 16;  }  private getModeText(): string {    return this.isExpanded() ? 'expanded · 展开态双列' : 'compact · 外屏单列';  }  private getModeDescription(): string {    if (this.isExpanded()) {      return '当前窗口宽度已经进入 expanded，列表切换成双列，同一屏可以看到更多记录。';    }    return '当前窗口宽度处于 compact，列表保持单列，优先保证阅读和点击区域稳定。';  }  @Builder  private RecordCard(item: DemoRecord) {    Column({ space: 10 }) {      Row() {        Text(item.tag)          .fontSize(12)          .fontColor('#2F8F83')          .padding({ left: 8, right: 8, top: 4, bottom: 4 })          .backgroundColor('#E6F4F1')          .borderRadius(999)        Blank()        Text(item.status)          .fontSize(12)          .fontColor(item.status === '待处理' || item.status === '待确认' ? '#B25E00' : '#276749')      }      .width('100%')      Text(item.title)        .fontSize(18)        .fontWeight(FontWeight.Medium)        .fontColor('#111827')        .maxLines(1)        .textOverflow({ overflow: TextOverflow.Ellipsis })      if (this.isExpanded()) {        Text(item.summary)          .fontSize(14)          .fontColor('#4B5563')          .lineHeight(20)          .maxLines(2)          .textOverflow({ overflow: TextOverflow.Ellipsis })      }      Row({ space: 8 }) {        Text(item.source)          .fontSize(13)          .fontColor('#6B7280')        Text('·')          .fontSize(13)          .fontColor('#9CA3AF')        Text(item.time)          .fontSize(13)          .fontColor('#6B7280')      }      .width('100%')    }    .width('100%')    .padding(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: '#14000000',      offsetX: 0,      offsetY: 4    })    .onClick(() => {      this.selectedId = item.id;    })  }  build() {    Column({ space: 16 }) {      Column({ space: 8 }) {        Row() {          Column({ space: 4 }) {            Text('Pura X Max 列表布局适配')              .fontSize(this.isExpanded() ? 26 : 22)              .fontWeight(FontWeight.Bold)              .fontColor('#111827')            Text(this.getModeText())              .fontSize(14)              .fontColor('#2F8F83')          }          .layoutWeight(1)          Text(Math.round(this.pageWidth).toString() + 'vp')            .fontSize(13)            .fontColor('#374151')            .padding({ left: 10, right: 10, top: 6, bottom: 6 })            .backgroundColor('#FFFFFF')            .borderRadius(999)        }        .width('100%')        Text(this.getModeDescription())          .fontSize(14)          .fontColor('#6B7280')          .lineHeight(21)      }      .width('100%')      .padding({        left: this.getPagePadding(),        right: this.getPagePadding(),        top: 18      })      Scroll() {        Grid() {          ForEach(this.records, (item: DemoRecord) => {            GridItem() {              this.RecordCard(item)            }          }, (item: DemoRecord) => item.id.toString())        }        .columnsTemplate(this.getColumnsTemplate())        .columnsGap(12)        .rowsGap(12)        .width('100%')        .padding({          left: this.getPagePadding(),          right: this.getPagePadding(),          bottom: 24        })      }      .layoutWeight(1)      .width('100%')      .edgeEffect(EdgeEffect.Spring)    }    .width('100%')    .height('100%')    .backgroundColor('#F6F7F9')    .onAreaChange((_: Area, newValue: Area) => {      const width = Number(newValue.width);      if (!Number.isNaN(width) && width > 0) {        this.pageWidth = width;      }    })  }}

关键实现点和适配边界

页面里的关键逻辑其实很少。

最重要的是 pageWidth。它记录的是当前页面根容器的实际宽度，而不是某个设备型号。Pura X Max 展开态会变宽，分屏窗口会变窄，横竖屏切换也会改变可用区域。只要页面跟着宽度变化，布局就能跟着当前窗口走。

@State private pageWidth: number = 0;

expandedWidth 用来控制断点。这里设置为 720vp，是为了让 Pura X Max 展开态更容易进入双列状态。实际项目里，这个值要结合卡片内容来调。

private readonly expandedWidth: number = 720;

Grid 的列数变化集中在 columnsTemplate 里。

.columnsTemplate(this.getColumnsTemplate())

compact 下返回 1fr，expanded 下返回 1fr 1fr。这种写法比手动写两个列表更干净，也更容易维护。

还有一个细节是卡片内容的展示策略。展开态不只是把一列改成两列，还可以适当显示更多信息。

if (this.isExpanded()) {  Text(item.summary)    .fontSize(14)    .fontColor('#4B5563')    .lineHeight(20)    .maxLines(2)    .textOverflow({ overflow: TextOverflow.Ellipsis })}

窄屏下隐藏摘要，是为了减少卡片高度；宽屏下展示摘要，是为了让大屏空间有真实内容，而不是单纯变成两列空卡片。

这个方案适合材料记录、通知列表、功能入口、统计卡片、收藏内容这类卡片相对独立的场景。时间线、聊天消息、审批流这类强顺序内容不一定适合双列，因为双列会改变阅读节奏，容易让用户不知道先看哪一条。

截图验证要看什么

运行后建议保留两张截图。

一张是折叠态或窄窗口截图。页面顶部会显示 compact · 外屏单列，所有记录从上到下单列排列，卡片里只保留标题、标签、状态、来源和时间。

另一张是展开态或宽窗口截图。页面顶部会显示 expanded · 展开态双列，列表变成两列，卡片摘要也会显示出来。同一屏内可以看到更多记录，页面不会出现明显的横向拉伸感。

截图时重点看三个位置。

页面标题区域是否过宽。

卡片是否按照 1 列和 2 列切换。

摘要是否只在宽屏状态出现。

这三个点都稳定后，一个普通列表页的基础适配就可以迁移回真实项目。真实项目里只需要把模拟数据替换成数据库或接口返回的数据，再把断点配置和主题样式接入项目的统一规范。

总结

Pura X Max 的列表页适配，可以先从窗口宽度入手。

外屏保持单列，展开态切换双列，这个改动不复杂，但能直接解决列表页在内屏上被拉伸、信息密度不足的问题。更重要的是，这种写法不绑定某一台设备，后续遇到分屏、横屏、平板和 2in1 场景，也能继续复用同一套判断方式。

实际项目中不要急着把所有列表都改成双列。先判断列表内容是否相对独立，再决定是否使用双列。适合双列的页面，重点控制卡片宽度、字段层级和页面边距；不适合双列的页面，应该继续保持单列，并通过最大宽度、详情分栏或侧边面板来处理展开态空间。