#鸿蒙通关秘籍#如何在订单列表页面中使用自定义组件展示订单信息？

可以创建一个自定义组件用于展示订单信息，然后在订单列表页面中使用此组件。定义组件OrderItem并在OrderList页面中循环使用：

// OrderItem.ets
@Component
export struct OrderItem {
  @Prop orderId: string;
  @Prop orderDate: string;
  @Prop status: string;

  build() {
    Row() {
      Text(this.orderId).width(200).height(60).fontSize(16).alignItems(HorizontalAlign.Start);
      Text(this.orderDate).width(150).height(60).fontSize(14).alignItems(HorizontalAlign.Center);
      Text(this.status).width(100).height(60).fontSize(14).alignItems(HorizontalAlign.End);
    }.padding(10).backgroundColor(Color.White).border({ width: 1, color: Color.Grey });
  }
}

// OrderList.ets
import { OrderItem } from './OrderItem';

@Entry
@Component
struct OrderList {
  @State orders: Array<{ orderId: string; orderDate: string; status: string }> = [
    { orderId: '001', orderDate: '2024-04-01', status: 'Completed' },
    { orderId: '002', orderDate: '2024-04-02', status: 'Shipped' },
    // 更多订单...
  ];

  build() {
    Column() {
      ForEach(this.orders, (order) => {
        OrderItem({
          orderId: order.orderId,
          orderDate: order.orderDate,
          status: order.status,
        });
      });
    }.spacing(10).padding(10);
  }
}

通过以上代码可以实现订单信息的显示，并支持组件的重用。