15.3 功能列表、注销

15.3 功能列表、注销

image-20220803103855817

实现步骤：

第 1 步：列表项抽取 ButtonItemWidget

lib/pages/my/my_index/widgets/button_item.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
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';

/// 按钮列表项
class ButtonItemWidget extends StatelessWidget {
  final String title;
  final String svgPath;
  final Color? color;
  final Function()? onTap;

  const ButtonItemWidget({
    Key? key,
    required this.title,
    required this.svgPath,
    this.color,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var color = this.color ?? AppColors.primary;
    return ListTileWidget(
      // 头部图标
      leading: <Widget>[
        // 底部圆形
        Container().tightSize(30.w).decorated(
              // 按主色 0.2 的透明度
              color: color.withOpacity(0.2),
              // 圆形边框
              borderRadius: BorderRadius.circular(30.w / 2),
            ),

        // 叠加图标
        IconWidget.svg(
          svgPath,
          color: color,
          size: 14.w,
        ),
      ].toStack(
        alignment: Alignment.center,
      ),

      // 间距
      leadingSpace: 20.w,

      // 标题
      title: TextWidget.body1(
        title,
        size: 15.sp,
        weight: FontWeight.w400,
      ),

      // 右侧箭头
      trailing: <Widget>[
        IconWidget.icon(
          Icons.arrow_forward_ios,
          size: 14.w,
          color: AppColors.outline,
        ),
      ],
    ).inkWell(
      onTap: onTap,
    );
  }
}

第 2 步：视图

lib/pages/my/my_index/view.dart

1
2
3
4
5
6
7
8
9
// My Order
Widget _buildMyOrder() {
  return ButtonItemWidget(
    title: LocaleKeys.myBtnMyOrder.tr,
    svgPath: AssetsSvgs.pDeliverySvg,
    color: "4061FF".toColor,
    onTap: () => Get.toNamed(RouteNames.myOrderList),
  ).card().paddingVertical(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
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
// 按钮列表
Widget _buildButtonsList() {
  return <Widget>[
    // Edit Profile
    ButtonItemWidget(
      title: LocaleKeys.myBtnEditProfile.tr,
      svgPath: AssetsSvgs.pCurrencySvg,
      color: "4971FF".toColor,
      onTap: () => Get.toNamed(RouteNames.myProfileEdit),
    ),

    // Billing Address
    ButtonItemWidget(
      title: LocaleKeys.myBtnBillingAddress.tr,
      svgPath: AssetsSvgs.pHomeSvg,
      color: "F43284".toColor,
    ),

    // Billing Address
    ButtonItemWidget(
      title: LocaleKeys.myBtnShippingAddress.tr,
      svgPath: AssetsSvgs.pHomeSvg,
      color: "5F84FF".toColor,
    ),

    // Language
    ButtonItemWidget(
      title: LocaleKeys.myBtnLanguage.tr,
      svgPath: AssetsSvgs.pTranslateSvg,
      color: "41AA3D".toColor,
      onTap: () => Get.toNamed(RouteNames.myLanguage),
    ),

    // Theme
    ButtonItemWidget(
      title: LocaleKeys.myBtnTheme.tr,
      svgPath: AssetsSvgs.pThemeSvg,
      color: "F89C52".toColor,
      onTap: () => ConfigService.to.switchThemeModel(),
    ),

    // 调试工具
    ButtonItemWidget(
      title: LocaleKeys.myBtnStyles.tr,
      svgPath: AssetsSvgs.pCurrencySvg,
      color: "4971FF".toColor,
      onTap: () => Get.toNamed(RouteNames.stylesStylesIndex),
    ),

    // end
  ].toColumn().card().paddingBottom(30.h);
}

第 3 步：用户注销

用户 service

lib/common/services/user.dart

1
2
3
4
5
6
7
/// 注销
Future<void> logout() async {
  await Storage().remove(Constants.storageToken);
  _profile(UserProfileModel());
  _isLogin.value = false;
  token = '';
}

删除本地 token , 清空 profile 资料

控制器

lib/pages/my/my_index/controller.dart

1
2
3
4
5
// 注销
void onLogout() {
  UserService.to.logout();
  Get.find<MainController>().onJumpToPage(0);
}

视图

lib/pages/my/my_index/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 主视图
Widget _buildView() {
  return CustomScrollView(
    slivers: <Widget>[
      ...

      // 注销
      ButtonWidget.primary(
        LocaleKeys.myBtnLogout.tr,
        height: 60,
        onTap: () => controller.onLogout(),
      )
          .padding(
            left: AppSpace.page,
            right: AppSpace.page,
            bottom: AppSpace.listRow * 2,
          )
          .sliverBox,

提交代码到 git