19.2 订单详情页面

19.2 订单详情页面

image-20220805080145384

实现步骤：

第 1 步：控制器

lib/pages/my/order_details/controller.dart

1
2
// 订单详情
final OrderModel order = Get.arguments as OrderModel;

第 2 步：视图

lib/pages/my/order_details/view.dart

顶部标题组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 标题
Widget _buildTitle() {
  return <Widget>[
    // Order ID
    TextWidget.title3(
            "${LocaleKeys.orderDetailsOrderID.tr} : ${controller.order.id}")
        .expanded(),

    // 15 Jan 2019
    TextWidget.body2(
        "${controller.order.dateCreated?.dateFormatOfyyyyMMdd}"),
  ].toRow().padding(
        top: AppSpace.page,
        bottom: AppSpace.listRow,
        left: AppSpace.page,
        right: AppSpace.page,
      );
}

其它组件定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 横向状态
Widget _buildHorizontalStatus() {
  return const Text("横向状态");
}

// 纵向状态
Widget _buildVerticalStatus() {
  return const Text("纵向状态");
}

// 寄件地、目的地
Widget _buildBillAddress() {
  return const Text("寄件地、目的地");
}

// 商品列表
Widget _buildProductsList() {
  return const Text("商品列表");
}

// 小计
Widget _buildTotal() {
  return const Text("小计");
}

主视图布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 主视图
Widget _buildView() {
  return SingleChildScrollView(
    child: <Widget>[
      // 标题
      _buildTitle(),

      // 横向状态
      _buildHorizontalStatus(),

      // 纵向状态
      _buildVerticalStatus(),

      // 寄件地、目的地
      _buildBillAddress(),

      // 商品列表
      _buildProductsList(),

      // 小计
      _buildTotal(),

      // 底部间距
      const SizedBox(height: 100),

      // end
    ].toColumn(),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@override
Widget build(BuildContext context) {
  return GetBuilder<OrderDetailsController>(
    init: OrderDetailsController(),
    id: "order_details",
    builder: (_) {
      return Scaffold(
        appBar:
            mainAppBarWidget(titleString: LocaleKeys.orderDetailsTitle.tr),
        body: SafeArea(
          child: _buildView(),
        ),
      );
    },
  );
}

第 3 步：列表页点击进入

列表控制器

lib/pages/my/order_list/controller.dart

1
2
3
4
/// 订单详情
void onOrderItemTap(OrderModel order) {
  Get.toNamed(RouteNames.myOrderDetails, arguments: order);
}

提交代码到 git