HarmonyOS7 表格在手机上要换思路：ArkUI/ArkTS 实战拆解

2026/8/7 12:19:12

文章目录

- - 前言
  - 为什么这个问题经常被写乱
  - 表格到卡片的映射
  - 改造步骤
  - 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()把原来的多列数据拆成标题区、金额状态区和辅助信息区，比横向表格更适合单手阅读。

金额和状态右对齐，因为它们是用户做判断时最常看的字段。

操作按钮放底部，不会和数据挤在一起，也减少误触。

字段取舍示例

原始列	卡片展示	说明
账单名称	第一行左侧	主识别信息
金额	第一行右侧	需要强调
状态	金额下方	和金额形成判断组合
时间	标题下方	辅助排序和核对
发票状态	详情页或标签	非所有场景都必须首屏展示