前言
我在做 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;privateisExpanded(): 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 的列模板就可以跟着变化。
privategetColumnsTemplate(): 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 场景，也能继续复用同一套判断方式。
实际项目中不要急着把所有列表都改成双列。先判断列表内容是否相对独立，再决定是否使用双列。适合双列的页面，重点控制卡片宽度、字段层级和页面边距；不适合双列的页面，应该继续保持单列，并通过最大宽度、详情分栏或侧边面板来处理展开态空间。
