前言
列表页是折叠屏适配里最容易被低估的页面。
因为它看起来太普通了。很多应用里都有列表：材料列表、通知列表、任务列表、会议列表、整理结果列表。手机上能用，放到 Pura X Max 外屏上也能用，到了展开态里好像也没有明显报错。真正跑起来看一眼，问题才会慢慢浮出来：页面变宽了，但信息并没有变得更好读。
我一开始也容易把这个问题想简单。展开态空间更大，那就多放几个字段。标题旁边放状态，下面放摘要，再加来源、时间、标签、负责人、优先级，右边再放按钮。这样一看，页面确实不空了，但列表开始变得像一张压缩过的小表格。字段越多，用户扫列表越慢。
Pura X Max 的外屏是 5.4 英寸，内屏是 7.7 英寸，外屏分辨率为 1848 × 1264，内屏分辨率为 2584 × 1828，系统版本为 HarmonyOS 6.1。这个尺寸变化已经足够让列表页改变信息密度，但改变信息密度不等于把字段全部堆上去。展开态应该让用户更快判断信息，而不是让用户在更多字段里重新找重点。
所以这次我处理的不是列表怎么变复杂，而是列表怎么在展开态增加字段以后仍然保持清楚。小屏只保留主字段，大屏补充辅助字段，完整详情继续交给详情页或右侧面板。
一、列表先别急着变多
1.1 大屏空着也不对
Pura X Max 展开态里，如果列表卡片还和外屏一样，只显示标题和状态，问题会很明显。
卡片被横向拉宽，页面左右空间变大，但一屏看到的有效信息没有增加。用户还是要点进详情，才能知道这条记录到底讲了什么、来自哪里、是不是需要马上处理。这样一来，展开态的优势基本没有发挥出来。
这类页面在真实项目里很常见。比如一个材料整理应用，用户打开列表时，通常不是只想看标题。他还想快速判断这条材料是不是待处理，是拍照来的还是语音转写来的，摘要里有没有关键信息，时间是不是最近生成的。
如果展开态还只展示标题和状态，页面看起来干净，但信息判断效率不高。用户拥有更大的屏幕，却仍然要靠频繁点击详情来完成判断。
1.2 字段太多也不行
另一个方向也不稳，就是把字段全部放出来。
我之前看过一些大屏列表改造，做着做着就变成了表格。标题、摘要、来源、时间、标签、负责人、优先级、操作按钮都显示出来，每条记录看起来信息很多，但用户的第一眼反而不知道该看哪里。
这类问题的本质是阅读顺序被打乱了。
列表页的核心任务是让用户快速扫。用户扫列表时，通常不是逐字阅读，而是先抓几个判断点：
- 这条记录是什么
- 当前状态是什么
- 大概内容是什么
- 它从哪里来
- 我现在要不要处理
这些判断点有先后顺序。标题和状态是第一层，摘要和来源是第二层，负责人和优先级是第三层。完整原文、历史记录、附件、识别日志这些内容，已经不是列表页应该承载的东西。
所以展开态列表增加字段时，我会先克制一点。多放字段没问题，但字段要有层级。卡片仍然要像卡片，不能变成一行一行字段拼出来的表格。
二、先给字段分层
2.1 主字段永远显示
列表里有些字段是不能藏的。
标题要显示，因为用户需要知道这条记录是什么。状态要显示，因为用户要判断是不是待处理。主操作也要保留，因为用户可能要快速处理当前记录。
这三个字段属于主字段。无论外屏还是展开态，它们都应该存在。
在小屏里，我会把卡片压得比较短，只展示标题、状态和主操作。这样做有一个好处：外屏一屏能看到更多记录，用户扫列表时不会被摘要、标签、来源打断。
2.2 辅助字段跟着宽度出现
摘要、来源、时间、标签、负责人、优先级这些字段，我会放到辅助层。
它们不是不重要，而是要看窗口宽度够不够。外屏里全放出来会挤，展开态里适当放出来很有价值。
比如摘要可以让用户不用进详情就知道内容大概；来源可以说明这条记录来自拍照、语音还是文本整理；时间可以帮助判断是否是最近内容；标签和优先级可以辅助筛选；负责人适合放在右侧小区域，告诉用户这条记录归谁处理。
这也是我写响应式列表时常用的思路：数据是一套，展示是多层。不要为了小屏和大屏拆两套数据结构，真正变化的是字段显示层级。
2.3 详情字段不要塞进列表
有些字段就不应该放在列表里。
完整原文、识别日志、附件、历史操作记录，这些信息看起来能增加内容厚度，但放到列表里会严重影响浏览效率。列表页只适合承担判断任务，真正的深度信息应该进入详情页、右侧详情面板或者弹层。
这个判断很重要。很多展开态页面出问题，不是因为字段太少，而是因为没有分清字段属于列表还是详情。
我这次把字段拆成三层：
主字段：标题、状态、主操作。
辅助字段：摘要、来源、时间、标签、负责人、优先级。
详情字段：完整原文、附件、日志、历史处理记录。
这样拆完以后，代码里的判断会简单很多。小屏只渲染主字段，展开态补充辅助字段，详情字段暂时不进入列表卡片。
三、断点只管展示层
3.1 不按机型写死
Pura X Max 适配里，我不太愿意直接写某个机型判断。原因很简单，折叠屏还有分屏、悬浮窗、横屏这些状态。即使是同一台设备，应用窗口也不一定永远是外屏或完整展开态。
更稳的方式是看当前窗口宽度。宽度达到一定值，就展示辅助字段；宽度不够，就保留主字段。
示例里我用了一个简单阈值：
arkts
private readonly expandedWidth: number = 780;
private isExpanded(): boolean {
return this.getEffectiveWidth() >= this.expandedWidth;
}这里的 780vp 不是标准答案。不同项目要根据卡片内容调整。卡片内容短，可以提前进入展开态；摘要比较长，或者右侧还有操作区，就要适当调高阈值。
3.2 演示宽度只服务 Demo
代码里还有一个 previewWidth。它的作用只是方便在同一台模拟器里切换外屏和展开态。
真实项目里不需要这个字段。真实项目只需要通过页面区域变化拿到当前宽度，然后计算布局状态。
这个区别我会在代码里写注释，因为它很容易被误用。Demo 里加按钮，是为了让读者不用反复折叠设备也能看到效果；迁移回项目时，演示逻辑应该删掉。
3.3 卡片分开写更清楚
这次我没有把所有字段都写在一个卡片里，再用很多 if 控制显示。那样虽然代码量少一点，但读起来不直观。
我把卡片拆成两个：
CompactCard 处理小屏卡片。
ExpandedCard 处理展开态卡片。
最后通过 RecordCard() 统一选择。
arkts
@Builder
private RecordCard(item: MaterialRecord) {
if (this.isExpanded()) {
this.ExpandedCard(item)
} else {
this.CompactCard(item)
}
}这样写的好处是结构清楚。小屏卡片怎么组织，展开态卡片怎么组织，各自独立。后续要调整某个状态，也不容易互相影响。
四、跑一遍材料列表
这个示例模拟的是材料整理场景。窄窗口下，卡片只显示状态、标题和主操作；展开态下，卡片增加摘要、来源、时间、标签、负责人和优先级，但仍然保持卡片结构。
代码可以放到 entry/src/main/ets/pages/Index.ets 中运行。里面没有依赖项目主题、图片资源或接口数据，主要用来观察不同窗口宽度下的字段显示策略。
arkts
interface MaterialRecord {
id: number;
title: string;
status: string;
actionText: string;
summary: string;
source: string;
time: string;
tag: string;
priority: string;
owner: string;
}
@Entry
@Component
struct Index {
// 当前页面真实宽度，由 onAreaChange 写入
@State private pageWidth: number = 0;
// 演示宽度，只用于在同一个模拟器里切换外屏和展开态效果
@State private previewWidth: number = 0;
// 当前选中项，用来观察不同布局下选中态是否一致
@State private selectedId: number = 1;
// 展开态阈值。真实项目里可以抽成统一断点配置
private readonly expandedWidth: number = 780;
// 模拟材料数据。字段故意多一些，方便展示主字段和辅助字段的分层
private readonly records: MaterialRecord[] = [
{
id: 1,
title: '社区物业缴费提醒',
status: '待处理',
actionText: '处理',
summary: '识别到物业费缴纳截止日期、金额明细和办理地点，建议保存为待办提醒。',
source: '拍照整理',
time: '09:20',
tag: '通知',
priority: '高优先级',
owner: '物业服务中心'
},
{
id: 2,
title: 'Pura X Max 适配会议纪要',
status: '待确认',
actionText: '确认',
summary: '整理出外屏、展开态、横屏和悬停态几类页面问题，适合进入开发清单。',
source: '语音转写',
time: '10:45',
tag: '会议',
priority: '中优先级',
owner: '产品研发组'
},
{
id: 3,
title: '客户需求变更记录',
status: '待处理',
actionText: '处理',
summary: '本次变更涉及首页布局、权限配置、消息提醒和后台字段展示。',
source: '文本整理',
time: '13:10',
tag: '项目',
priority: '高优先级',
owner: '客户成功组'
},
{
id: 4,
title: '活动报名确认单',
status: '已保存',
actionText: '查看',
summary: '提取到报名人、联系方式、活动时间和签到地址，可加入行程提醒。',
source: '相册导入',
time: '15:25',
tag: '表单',
priority: '普通',
owner: '活动运营'
},
{
id: 5,
title: '门诊复查预约提示',
status: '已整理',
actionText: '查看',
summary: '提取到复查时间、科室、楼层和注意事项，后续可保存为健康提醒。',
source: '拍照整理',
time: '16:40',
tag: '提醒',
priority: '中优先级',
owner: '个人记录'
},
{
id: 6,
title: '课程作业提交说明',
status: '已整理',
actionText: '查看',
summary: '识别到提交时间、文件格式、命名规范和邮箱地址，适合保存为待办。',
source: '图片识别',
time: '18:05',
tag: '学习',
priority: '普通',
owner: '课程助教'
}
];
// Demo 中优先使用演示宽度，真实项目里可以直接返回 pageWidth
private getEffectiveWidth(): number {
if (this.previewWidth > 0) {
return this.previewWidth;
}
return this.pageWidth;
}
// 只用窗口宽度判断字段层级，不按具体机型写死逻辑
private isExpanded(): boolean {
return this.getEffectiveWidth() >= this.expandedWidth;
}
private getContentWidth(): Length {
if (this.previewWidth > 0) {
return this.previewWidth;
}
return '100%';
}
private getPagePadding(): number {
return this.isExpanded() ? 24 : 16;
}
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 getSelectedRecord(): MaterialRecord {
const found = this.records.find((item: MaterialRecord) => item.id === this.selectedId);
return found ? found : this.records[0];
}
private setPreview(width: number) {
this.previewWidth = width;
}
private getStatusColor(status: string): string {
if (status === '待处理') {
return '#B25E00';
}
if (status === '待确认') {
return '#7C3AED';
}
return '#276749';
}
private getStatusBgColor(status: string): string {
if (status === '待处理') {
return '#FFF4E5';
}
if (status === '待确认') {
return '#F1EAFE';
}
return '#E7F5EE';
}
@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(status: string) {
Text(status)
.fontSize(12)
.fontColor(this.getStatusColor(status))
.padding({ left: 8, right: 8, top: 4, bottom: 4 })
.backgroundColor(this.getStatusBgColor(status))
.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('展开态', 960)
}
.width('100%')
}
.width('100%')
}
@Builder
private CompactCard(item: MaterialRecord) {
Column({ space: 12 }) {
Row({ space: 8 }) {
this.StatusPill(item.status)
if (this.selectedId === item.id) {
Text('当前')
.fontSize(12)
.fontColor('#2F8F83')
}
Blank()
Button(item.actionText)
.fontSize(13)
.fontColor('#FFFFFF')
.height(32)
.padding({ left: 12, right: 12 })
.backgroundColor('#2F8F83')
.borderRadius(16)
.onClick(() => {
this.selectedId = item.id;
})
}
.width('100%')
Text(item.title)
.fontSize(17)
.fontWeight(FontWeight.Medium)
.fontColor('#111827')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.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: '#12000000',
offsetX: 0,
offsetY: 4
})
.onClick(() => {
this.selectedId = item.id;
})
}
@Builder
private ExpandedCard(item: MaterialRecord) {
Column({ space: 14 }) {
Row({ space: 16 }) {
Column({ space: 10 }) {
Row({ space: 8 }) {
this.StatusPill(item.status)
this.MetaPill(item.tag)
if (this.selectedId === item.id) {
Text('当前')
.fontSize(12)
.fontColor('#2F8F83')
}
}
.width('100%')
Text(item.title)
.fontSize(18)
.fontWeight(FontWeight.Medium)
.fontColor('#111827')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
// 摘要只在展开态出现，避免外屏卡片被撑高
Text(item.summary)
.fontSize(14)
.fontColor('#4B5563')
.lineHeight(21)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 8 }) {
this.MetaPill(item.source)
this.MetaPill(item.time)
this.MetaPill(item.priority)
}
.width('100%')
}
.layoutWeight(1)
// 右侧只保留负责人和主操作，不把更多详情继续塞进列表
Column({ space: 8 }) {
Text('负责人')
.fontSize(12)
.fontColor('#9CA3AF')
Text(item.owner)
.fontSize(14)
.fontColor('#374151')
.fontWeight(FontWeight.Medium)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Button(item.actionText)
.fontSize(13)
.fontColor('#FFFFFF')
.height(34)
.width('100%')
.backgroundColor('#2F8F83')
.borderRadius(17)
.onClick(() => {
this.selectedId = item.id;
})
}
.width(132)
.padding(12)
.backgroundColor('#F9FAFB')
.borderRadius(16)
}
.width('100%')
}
.width('100%')
.padding(18)
.backgroundColor(this.selectedId === item.id ? '#EEF7F5' : '#FFFFFF')
.borderRadius(22)
.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: '#12000000',
offsetX: 0,
offsetY: 4
})
.onClick(() => {
this.selectedId = item.id;
})
}
@Builder
private RecordCard(item: MaterialRecord) {
if (this.isExpanded()) {
this.ExpandedCard(item)
} else {
this.CompactCard(item)
}
}
@Builder
private SelectedPanel() {
Column({ space: 10 }) {
Row() {
Text('当前选中')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor('#111827')
Blank()
this.StatusPill(this.getSelectedRecord().status)
}
.width('100%')
Text(this.getSelectedRecord().title)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#111827')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
if (this.isExpanded()) {
Text(this.getSelectedRecord().summary)
.fontSize(14)
.fontColor('#4B5563')
.lineHeight(21)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
}
.width('100%')
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(22)
.shadow({
radius: 10,
color: '#10000000',
offsetX: 0,
offsetY: 4
})
}
@Builder
private ListArea() {
Scroll() {
Column({ space: 12 }) {
ForEach(this.records, (item: MaterialRecord) => {
this.RecordCard(item)
}, (item: MaterialRecord) => item.id.toString())
}
.width('100%')
.padding({ bottom: 24 })
}
.layoutWeight(1)
.width('100%')
.edgeEffect(EdgeEffect.Spring)
}
build() {
Column() {
Column({ space: 16 }) {
this.HeaderPanel()
this.SelectedPanel()
this.ListArea()
}
.width(this.getContentWidth())
.height('100%')
.padding({
left: this.getPagePadding(),
right: this.getPagePadding(),
top: 18,
bottom: 16
})
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.backgroundColor('#F6F7F9')
.onAreaChange((_: Area, newValue: Area) => {
const width = Number(newValue.width);
if (!Number.isNaN(width) && width > 0) {
this.pageWidth = width;
}
})
}
}五、跑出来后的差异
外屏状态下，列表卡片会明显短很多。每张卡片只有状态、标题和操作按钮，用户可以快速扫过多条记录。这个状态适合手机外屏和窄窗口，重点是减少打扰，先让用户判断哪条记录需要处理。
展开态下，同样的数据会显示更多上下文。标题下面出现摘要，卡片底部出现来源、时间和优先级，右侧小区域显示负责人和操作按钮。信息密度确实提高了，但卡片仍然保留主次关系，没有被改造成表格。
这段代码里，真正需要迁回项目的是字段分层和 RecordCard() 的判断逻辑。previewWidth、PreviewButton() 这些只是演示用的，正式项目里应该删掉，让页面直接跟随真实窗口宽度变化。
还有一点需要注意：展开态增加字段不是越多越好。我的经验是，一张列表卡片里最多放一段摘要、三到四个元信息标签、一个主操作。如果再继续塞负责人电话、附件数量、完整原文、历史状态，页面很快就会变成压缩表格。列表页只负责判断，详情页才负责展开。
聊天消息、时间线动态、审批流这类强顺序内容，也不适合用这种字段扩展方式。它们更依赖连续阅读，字段变多会打断节奏。材料列表、任务列表、通知列表、客户记录这类相对独立的卡片，更适合采用这种处理。
总结
Pura X Max 展开态给了列表页更多空间，但这些空间应该用来提高判断效率，而不是把所有字段都塞进卡片。小屏下保留标题、状态和主操作，展开态再补充摘要、来源、时间、标签和负责人，列表会更有信息量，也不会失去卡片阅读的节奏。
我现在处理这类列表时，会先给字段分层，再决定哪些字段跟随断点展示。标题、状态、主操作属于核心字段；摘要、来源、时间、标签属于辅助字段；完整内容、历史记录和附件仍然留在详情层。这个顺序稳定以后，外屏和展开态的列表体验都会清楚很多。