文章目录
- 前言
- 为什么这个问题经常被写乱
- 表格到卡片的映射
- 改造步骤
- ArkUI/ArkTS 示例
- 关键代码说明
- 字段取舍示例
- 移动端表格先保主线
- 小结
前言
手机屏幕不适合硬塞 PC 表格。列多了以后，字号变小、横向滚动难用、关键数据还被挤到看不见的位置。我在 HarmonyOS7 里做账单、库存、审批明细时，更倾向于把表格改成主次分明的列表卡片。
移动端数据展示不是缩小表格，而是重新排序信息优先级。
这篇以“账单明细”为例：PC 表格里可能有单号、名称、金额、状态、时间、发票、操作七八列，但手机上真正优先的是“这是什么账单、多少钱、现在什么状态”。
为什么这个问题经常被写乱
表格在手机上要换思路 这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。
所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。
表格到卡片的映射
| 表格列 | 移动端位置 | 原因 |
|---|---|---|
| 名称/单号 | 主标题 | 用户先识别对象 |
| 金额/状态 | 右侧强调 | 决策信息 |
| 时间/备注 | 次级文案 | 辅助判断 |
| 操作 | 底部按钮 | 避免误触 |
步骤：先找出用户最关心的两列，再把其余字段分组展示。不要一开始就追求“所有列都露出来”。
改造步骤
- 从原表格里挑出主识别字段，比如账单名称或审批单号。
- 找出决策字段，比如金额、库存余量、审批状态。
- 把低频字段放到次级文案或详情页。
- 每张卡片只保留 1 个主要操作。
- 用
List承载卡片，保证长列表滚动性能和 key 稳定。
ArkUI/ArkTS 示例
classBillItem{id:number=0name:string=''amount:string=''status:string=''time:string=''constructor(id:number,name:string,amount:string,status:string,time:string){this.id=idthis.name=namethis.amount=amountthis.status=statusthis.time=time}}@Entry@Componentstruct MobileTablePage{@Statebills:BillItem[]=[newBillItem(1,'企业云服务续费','¥1280.00','已支付','07-10 14:20'),newBillItem(2,'短信通知套餐','¥199.00','待开票','07-09 09:11'),newBillItem(3,'对象存储流量','¥86.50','已退款','07-08 18:02')]@BuilderBillCard(item:BillItem){Column({space:10}){Row(){Column({space:4}){Text(item.name).fontSize(16).fontWeight(FontWeight.Medium)Text(item.time).fontSize(12).fontColor('#777777')}.alignItems(HorizontalAlign.Start)Blank()Column({space:4}){Text(item.amount).fontSize(17).fontWeight(FontWeight.Bold)Text(item.status).fontSize(12).fontColor(item.status==='已退款'?'#C92A2A':'#2F9E44')}.alignItems(HorizontalAlign.End)}Divider().color('#EEEEEE')Row(){Text(`账单编号：BILL-${item.id}`).fontSize(12).fontColor('#666666')Blank()Button('详情').height(30).buttonStyle(ButtonStyleMode.TEXTUAL)}}.padding(14).backgroundColor('#FFFFFF').borderRadius(10)}build(){Column({space:12}){Text('账单明细').fontSize(24).fontWeight(FontWeight.Bold)Text('按移动端阅读顺序重排字段').fontSize(13).fontColor('#777777')List({space:10}){ForEach(this.bills,(item:BillItem)=>{ListItem(){this.BillCard(item)}},(item:BillItem)=>item.id.toString())}.layoutWeight(1)}.padding(16).backgroundColor('#F5F6FA').height('100%')}}关键代码说明
BillCard()把原来的多列数据拆成标题区、金额状态区和辅助信息区，比横向表格更适合单手阅读。
金额和状态右对齐，因为它们是用户做判断时最常看的字段。
操作按钮放底部，不会和数据挤在一起，也减少误触。
字段取舍示例
| 原始列 | 卡片展示 | 说明 |
|---|---|---|
| 账单名称 | 第一行左侧 | 主识别信息 |
| 金额 | 第一行右侧 | 需要强调 |
| 状态 | 金额下方 | 和金额形成判断组合 |
| 时间 | 标题下方 | 辅助排序和核对 |
| 发票状态 | 详情页或标签 | 非所有场景都必须首屏展示 |
如果用户确实需要横向对比大量数字，移动端也可以提供筛选和详情页，而不是强迫用户在一张小表格里横滑。
移动端表格先保主线
把 PC 表格搬到手机上时，先别急着保留所有列。真正要优先展示的是主识别信息和决策信息，比如账单名称、金额、状态。其他字段可以放到次级文案、标签或详情页。
操作区也要从数据区里拿出来。详情按钮放在卡片底部，比挤在金额旁边更稳，误触概率也更低。
长列表仍然要使用稳定 key。账单明细经常分页、筛选、刷新，item.id比数组下标可靠得多。
小结
HarmonyOS7 移动端页面要尊重屏幕尺寸。表格不是不能做，而是要先问：用户在手机上到底想先看哪两个字段？
