19.4 状态纵向展示

19.4 状态纵向展示

image-20220805083156178

实现步骤：

第 1 步：业务组件 StepVerticalItemWidget

lib/common/components/steps.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/// 纵向状态
class StepVerticalItemWidget extends StatelessWidget {
  /// 状态名称
  final String statusName;

  /// 状态描述
  final String? statusDes;

  /// 状态时间
  final String? statusDateTime;

  /// 状态
  final StepStatus status;

  const StepVerticalItemWidget({
    Key? key,
    required this.statusName,
    this.statusDes,
    this.statusDateTime,
    this.status = StepStatus.none,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return <Widget>[
          // 日期
          TextWidget.body1(statusDateTime ?? "-"),

          // 指示标
          <Widget>[
            // 打底灰色
            Container(
              width: 3,
              height: constraints.minHeight,
              color: AppColors.surfaceVariant.withOpacity(0.5),
            ),
            // 横线
            if (status == StepStatus.success)
              Container(
                width: 3,
                height: constraints.minHeight,
                color: AppColors.primary,
              ),
            if (status == StepStatus.running)
              Container(
                width: 3,
                height: constraints.minHeight / 2,
                color: AppColors.primary,
              ).positioned(top: constraints.minHeight / 2),
            // 圆点
            Container(
              height: 7,
              width: 7,
              decoration: BoxDecoration(
                color: status == StepStatus.none
                    ? AppColors.surfaceVariant.withOpacity(0.5)
                    : AppColors.primary,
                borderRadius: const BorderRadius.all(
                  Radius.circular(7 / 2),
                ),
              ),
            ),
          ]
              .toStack(
                alignment: Alignment.center,
              )
              .width(30),

          // 说明
          <Widget>[
            TextWidget.title3(statusName),
            TextWidget.body2(
              statusDes ?? "-",
              softWrap: true,
              maxLines: 3,
            ),
          ]
              .toColumn(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
              )
              .expanded(),
        ].toRow();
      },
    ).constrained(
      minHeight: 70,
    );
  }
}

第 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 纵向状态
Widget _buildVerticalStatus() {
  return <Widget>[
    const StepVerticalItemWidget(
      statusName: "Delivered",
      statusDateTime: "20 Jan, 2019",
      statusDes:
          "Lorem Ipsum is simply dumy text of printing and typesetting industry.",
      status: StepStatus.none,
    ),
    const StepVerticalItemWidget(
      statusName: "Shipped",
      statusDateTime: "20 Jan, 2019",
      statusDes:
          "Lorem Ipsum is simply dumy text of printing and typesetting industry.",
      status: StepStatus.none,
    ),
    const StepVerticalItemWidget(
      statusName: "Picked",
      statusDateTime: "20 Jan, 2019",
      statusDes:
          "Lorem Ipsum is simply dumy text of printing and typesetting industry.",
      status: StepStatus.running,
    ),
    const StepVerticalItemWidget(
      statusName: "Processing",
      statusDateTime: "20 Jan, 2019",
      statusDes:
          "Lorem Ipsum is simply dumy text of printing and typesetting industry.",
      status: StepStatus.success,
    ),
    const StepVerticalItemWidget(
      statusName: "Confirm",
      statusDateTime: "20 Jan, 2019",
      statusDes:
          "Lorem Ipsum is simply dumy text of printing and typesetting industry.",
      status: StepStatus.success,
    ),
    const StepVerticalItemWidget(
      statusName: "Pending",
      statusDateTime: "20 Jan, 2019",
      statusDes:
          "Lorem Ipsum is simply dumy text of printing and typesetting industry.",
      status: StepStatus.success,
    ),
  ].toColumn().padding(
        bottom: AppSpace.listRow,
        left: AppSpace.page,
        right: AppSpace.page,
      );
}

提交代码到 git