19.5 发件人、收件人栏位

19.5 发件人、收件人栏位

image-20220805084218402

实现步骤：

第 1 步：BuildBillAddress 组件

lib/pages/my/order_details/widgets/bill_address.dart

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import 'package:flutter/material.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';

/// 订单地址项
class BuildBillAddress extends StatelessWidget {
  const BuildBillAddress({
    Key? key,
    this.title,
    this.address,
    this.city,
    this.state,
    this.country,
    this.phone,
  }) : super(key: key);

  final String? title, address, city, state, country, phone;

  Widget _buildView() {
    return <Widget>[
      // title
      TextWidget.title3(title ?? "").paddingBottom(AppSpace.listItem),

      // address
      IconTextWidget(
        icon: IconWidget.icon(
          Icons.storefront,
          size: 15,
        ),
        text: address,
      ).paddingBottom(AppSpace.listItem),

      // address, city, state, country
      IconTextWidget(
        icon: IconWidget.icon(
          Icons.location_on_outlined,
          size: 15,
        ),
        text: "$city, $state, $country",
      ).paddingBottom(AppSpace.listItem),

      // phone
      IconTextWidget(
        icon: IconWidget.icon(
          Icons.phone_in_talk,
          size: 15,
        ),
        text: phone,
      ),
    ].toColumn(
      crossAxisAlignment: CrossAxisAlignment.start,
    );
  }

  @override
  Widget build(BuildContext context) {
    return _buildView();
  }
}

第 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
19
20
21
22
23
24
25
26
27
28
29
// 寄件地、目的地
Widget _buildBillAddress() {
  return <Widget>[
    // Bill From, 商家发货地址写死
    BuildBillAddress(
      title: LocaleKeys.orderDetailsBillFrom.tr,
      address: "Adidas Shoes",
      city: "Kingston",
      state: "New York",
      country: "United States",
      phone: "+44-213 543 230",
    ).expanded(),

    // 间距
    SizedBox(
      width: AppSpace.iconTextMedium,
    ),

    // Bill To
    BuildBillAddress(
      title: LocaleKeys.orderDetailsBillTo.tr,
      address: controller.order.shipping?.address1,
      city: controller.order.shipping?.city,
      state: controller.order.shipping?.state,
      country: controller.order.shipping?.country,
      phone: controller.order.billing?.phone,
    ).expanded(),
  ].toRow().paddingAll(AppSpace.card).card().paddingBottom(AppSpace.listRow);
}

提交代码到 git