Flutter与OpenHarmony订单列表组件开发指南-程序员充电站

前言

订单列表是电商应用中用户查看购买记录的重要功能。它需要展示订单状态、商品信息、金额、时间等关键数据，并提供查看详情、取消订单、确认收货等操作入口。本文将详细介绍如何在Flutter和OpenHarmony平台上实现一个功能完善的订单列表组件。

订单列表的设计需要考虑信息的完整性、状态的清晰展示、以及操作的便捷性。不同状态的订单需要显示不同的操作按钮，这增加了组件的复杂度。

Flutter订单列表实现

订单数据结构

定义订单数据和组件框架。

classOrderListWidgetextendsStatelessWidget{constOrderListWidget({super.key});@overrideWidgetbuild(BuildContextcontext){finalorders=[{'id':'202312001','status':'待付款','product':'苏绣牡丹团扇','price':'299','time':'2023-12-10 14:30'},{'id':'202312002','status':'待发货','product':'湘绣丝巾礼盒','price':'458','time':'2023-12-09 10:15'},{'id':'202312003','status':'已完成','product':'蜀绣手工钱包','price':'188','time':'2023-12-05 16:45'},];

订单数据包含订单号、状态、商品名称、价格和下单时间。不同状态对应不同的操作按钮。

在实际项目中，订单状态通常使用枚举类型定义，包括待付款、待发货、待收货、已完成、已取消等多种状态。

订单卡片布局

每个订单以卡片形式展示。

returnContainer(margin:constEdgeInsets.symmetric(horizontal:16),child:Column(children:orders.map((order){returnContainer(margin:constEdgeInsets.only(bottom:12),padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(12),boxShadow:[BoxShadow(color:Colors.black.withOpacity(0.05),blurRadius:5)],),child:Column(children:[Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:[Text('订单号: ${order['id']}',style:TextStyle(fontSize:12,color:Colors.grey[600])),Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:2),decoration:BoxDecoration(color:_getStatusColor(order['status']!).withOpacity(0.1),borderRadius:BorderRadius.circular(4),),child:Text(order['status']!,style:TextStyle(fontSize:12,color:_getStatusColor(order['status']!))),),],),

订单号和状态标签分布在卡片顶部两端。状态标签使用不同颜色区分，通过_getStatusColor方法获取对应颜色。

状态颜色映射

根据订单状态返回对应的颜色。

Color_getStatusColor(Stringstatus){switch(status){case'待付款':returnColors.orange;case'待发货':returnColors.blue;case'待收货':returnColors.purple;case'已完成':returnColors.green;case'已取消':returnColors.grey;default:returnColors.grey;}}

不同状态使用不同颜色，帮助用户快速识别订单状态。橙色表示需要用户操作（付款），蓝色表示等待商家操作（发货），绿色表示已完成。

商品信息与操作按钮

展示商品信息和对应的操作按钮。

constDivider(height:24),Row(children:[Container(width:60,height:60,decoration:BoxDecoration(color:Colors.grey[200],borderRadius:BorderRadius.circular(8)),child:constIcon(Icons.shopping_bag,color:Colors.grey),),constSizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(order['product']!,style:constTextStyle(fontSize:14,fontWeight:FontWeight.w500)),constSizedBox(height:4),Text('¥${order['price']}',style:constTextStyle(fontSize:14,fontWeight:FontWeight.bold,color:Color(0xFFE53935))),],),),],),constSizedBox(height:12),Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:[Text(order['time']!,style:TextStyle(fontSize:11,color:Colors.grey[500])),Row(children:[if(order['status']=='待付款')OutlinedButton(onPressed:(){},style:OutlinedButton.styleFrom(padding:constEdgeInsets.symmetric(horizontal:12,vertical:4)),child:constText('去付款',style:TextStyle(fontSize:12)),),constSizedBox(width:8),OutlinedButton(onPressed:(){},style:OutlinedButton.styleFrom(padding:constEdgeInsets.symmetric(horizontal:12,vertical:4)),child:constText('查看详情',style:TextStyle(fontSize:12)),),],),],),],),);}).toList(),),);}}

条件渲染根据订单状态显示不同的操作按钮。待付款订单显示"去付款"按钮，所有订单都显示"查看详情"按钮。

OpenHarmony鸿蒙实现

组件与数据定义

鸿蒙平台定义订单数据接口。

interfaceOrderItem{id:stringstatus:stringproduct:stringprice:stringtime:string}@Componentstruct OrderListComponent{privateorders:Array<OrderItem>=[{id:'202312001',status:'待付款',product:'苏绣牡丹团扇',price:'299',time:'2023-12-10 14:30'},{id:'202312002',status:'待发货',product:'湘绣丝巾礼盒',price:'458',time:'2023-12-09 10:15'},{id:'202312003',status:'已完成',product:'蜀绣手工钱包',price:'188',time:'2023-12-05 16:45'}]

TypeScript接口定义订单数据结构，确保类型安全。

订单列表构建

使用ForEach遍历订单数据。

build(){Column(){ForEach(this.orders,(item:OrderItem)=>{Column(){Row(){Text('订单号: '+item.id).fontSize(12).fontColor('#666666')Blank()Text(item.status).fontSize(12).fontColor(this.getStatusColor(item.status)).backgroundColor(this.getStatusColor(item.status)+'1A').borderRadius(4).padding({left:8,right:8,top:2,bottom:2})}.width('100%')Divider().color('#EEEEEE').margin({top:12,bottom:12})

Blank组件实现两端对齐。状态标签颜色通过getStatusColor方法获取。

商品信息与操作

展示商品详情和操作按钮。

Row(){Stack(){Image($r('app.media.product')).width(60).height(60).borderRadius(8)}.width(60).height(60).backgroundColor('#F0F0F0').borderRadius(8)Column(){Text(item.product).fontSize(14).fontWeight(FontWeight.Medium)Text('¥'+item.price).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#E53935').margin({top:4})}.layoutWeight(1).alignItems(HorizontalAlign.Start).margin({left:12})}.width('100%')Row(){Text(item.time).fontSize(11).fontColor('#999999')Blank()if(item.status==='待付款'){Button('去付款').fontSize(12).height(28).backgroundColor('#8B4513').margin({right:8})}Button('查看详情').fontSize(12).height(28).fontColor('#8B4513').backgroundColor(Color.White).border({width:1,color:'#8B4513'})}.width('100%').margin({top:12})}.width('100%').padding(16).backgroundColor(Color.White).borderRadius(12).margin({bottom:12})})}.width('90%')}getStatusColor(status:string):string{constcolorMap:Record<string,string>={'待付款':'#FF9800','待发货':'#2196F3','待收货':'#9C27B0','已完成':'#4CAF50','已取消':'#9E9E9E'}returncolorMap[status]||'#9E9E9E'}}