19.3 状态横向展示

19.3 状态横向展示

image-20220805082030154

实现步骤：

第 1 步：抽取业务组件 StepHorizontalItemWidget

lib/common/components/steps.dart

定义状态枚举，三态

1
2
3
4
5
6
/// 状态枚举
enum StepStatus {
  none,
  running,
  success,
}

横向滚动组件

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
/// 横向状态
class StepHorizontalItemWidget extends StatelessWidget {
  /// 状态名称
  final String statusName;

  /// 状态
  final StepStatus status;

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return <Widget>[
          // 指示标
          <Widget>[
            // 横线 - 灰色打底
            Container(
              color: AppColors.surfaceVariant.withOpacity(0.5),
              height: 3,
            ),
            // 横线
            if (status == StepStatus.success)
              Container(
                color: AppColors.primary,
                height: 3,
              ),
            if (status == StepStatus.running)
              Container(
                color: AppColors.primary,
                height: 3,
                width: constraints.minWidth / 2,
              ).alignLeft(),
            // 圆点
            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,
              )
              .paddingBottom(AppSpace.iconTextSmail),

          // 文字
          TextWidget.body3(
            statusName,
          ),
        ].toColumn();
      },
    ).expanded();
  }
}

第 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
// 横向状态
Widget _buildHorizontalStatus() {
  return <Widget>[
    const StepHorizontalItemWidget(
      statusName: "Pending",
      status: StepStatus.success,
    ),
    const StepHorizontalItemWidget(
      statusName: "Confirmed",
      status: StepStatus.success,
    ),
    const StepHorizontalItemWidget(
      statusName: "Processing",
      status: StepStatus.running,
    ),
    const StepHorizontalItemWidget(
      statusName: "Picked",
      status: StepStatus.none,
    ),
    const StepHorizontalItemWidget(
      statusName: "Shipped",
      status: StepStatus.none,
    ),
    const StepHorizontalItemWidget(
      statusName: "Delivered",
      status: StepStatus.none,
    ),
  ].toRow().padding(
        bottom: AppSpace.listRow,
        left: AppSpace.page,
        right: AppSpace.page,
      );
}

这里的状态更适合 完整的快递配送流程，这里只做 UI 展示，大家按需要调整

提交代码到 git