文章目录前言为什么这个问题经常被写乱表格到卡片的映射改造步骤ArkUI/ArkTS 示例关键代码说明字段取舍示例移动端表格先保主线小结前言手机屏幕不适合硬塞 PC 表格。列多了以后字号变小、横向滚动难用、关键数据还被挤到看不见的位置。我在 HarmonyOS7 里做账单、库存、审批明细时更倾向于把表格改成主次分明的列表卡片。移动端数据展示不是缩小表格而是重新排序信息优先级。这篇以“账单明细”为例PC 表格里可能有单号、名称、金额、状态、时间、发票、操作七八列但手机上真正优先的是“这是什么账单、多少钱、现在什么状态”。为什么这个问题经常被写乱表格在手机上要换思路 这类内容很容易被写成“代码能跑就算讲完了”但对初学者来说这恰恰是最不够的地方。真正让人卡住的往往不是某个组件名记不住而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。所以这篇文章不只想给你一个能跑的例子更想把背后的判断过程讲清楚。你只要把这个判断过程吃透后面自己改页面、补需求、查问题时心里会稳很多。表格到卡片的映射表格列移动端位置原因名称/单号主标题用户先识别对象金额/状态右侧强调决策信息时间/备注次级文案辅助判断操作底部按钮避免误触步骤先找出用户最关心的两列再把其余字段分组展示。不要一开始就追求“所有列都露出来”。改造步骤从原表格里挑出主识别字段比如账单名称或审批单号。找出决策字段比如金额、库存余量、审批状态。把低频字段放到次级文案或详情页。每张卡片只保留 1 个主要操作。用List承载卡片保证长列表滚动性能和 key 稳定。ArkUI/ArkTS 示例classBillItem{id:number0name:stringamount:stringstatus:stringtime:stringconstructor(id:number,name:string,amount:string,status:string,time:string){this.ididthis.namenamethis.amountamountthis.statusstatusthis.timetime}}EntryComponentstruct 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 移动端页面要尊重屏幕尺寸。表格不是不能做而是要先问用户在手机上到底想先看哪两个字段