7.1 登录界面编写

7.1 登录界面编写

布局

image-20220718100702967

实现步骤：

第 1 步：i18n 多语言

lib/common/i18n/locale_keys.dart

1
2
3
4
5
// 登录 - back login
static const loginBackTitle = 'login_back_title';
static const loginBackDesc = 'login_back_desc';
static const loginBackFieldEmail = 'login_back_field_email';
static const loginBackFieldPassword = 'login_back_field_password';

lib/common/i18n/locales/locale_en.dart

1
2
3
4
5
// 登录 - back login
LocaleKeys.loginBackTitle: 'Welcome login!',
LocaleKeys.loginBackDesc: 'Sign in to continue',
LocaleKeys.loginBackFieldEmail: 'Name',
LocaleKeys.loginBackFieldPassword: 'Password',

lib/common/i18n/locales/locale_zh.dart

1
2
3
4
5
// 登录 - back login
LocaleKeys.loginBackTitle: '欢迎登陆!',
LocaleKeys.loginBackDesc: '登陆后继续',
LocaleKeys.loginBackFieldEmail: '账号',
LocaleKeys.loginBackFieldPassword: '登陆密码',

第 2 步：登录控制 Controller

lib/pages/system/login/controller.dart

1
2
3
4
5
/// 定义输入控制器
TextEditingController userNameController =
    TextEditingController(text: "ducafecat5");
TextEditingController passwordController =
    TextEditingController(text: "123456");
1
2
/// 表单 key
GlobalKey formKey = GlobalKey<FormState>();
1
2
3
4
5
6
7
8
9
10
11
12
/// Sign In
Future<void> onSignIn() async {
  if ((formKey.currentState as FormState).validate()) {
    try {
      Loading.show();

      Get.back(result: true);
    } finally {
      Loading.dismiss();
    }
  }
}
1
2
3
4
/// Sign Up
void onSignUp() {
  Get.offNamed(RouteNames.systemRegister);
}
1
2
3
4
5
6
7
/// 释放
@override
void onClose() {
  super.onClose();
  userNameController.dispose();
  passwordController.dispose();
}

第 3 步：登录视图

lib/pages/system/login/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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// 表单页
Widget _buildForm() {
  return Form(
    key: controller.formKey, //设置globalKey，用于后面获取FormState
    autovalidateMode: AutovalidateMode.onUserInteraction,
    child: <Widget>[
      // username
      TextFormWidget(
        autofocus: true,
        controller: controller.userNameController,
        labelText: LocaleKeys.registerFormName.tr,
        validator: Validatorless.multiple([
          Validatorless.required(LocaleKeys.validatorRequired.tr),
          Validatorless.min(
              3, LocaleKeys.validatorMin.trParams({"size": "3"})),
          Validatorless.max(
              20, LocaleKeys.validatorMax.trParams({"size": "20"})),
        ]),
      ).paddingBottom(AppSpace.listRow.w),

      // password
      TextFormWidget(
        controller: controller.passwordController,
        labelText: LocaleKeys.registerFormPassword.tr,
        isObscure: true,
        validator: Validatorless.multiple([
          Validatorless.required(LocaleKeys.validatorRequired.tr),
          Validators.password(
            6,
            18,
            LocaleKeys.validatorPassword.trParams(
              {"min": "6", "max": "18"},
            ),
          ),
        ]),
      ).paddingBottom(AppSpace.listRow.w * 2),

      // Forgot Password?
      TextWidget.body1(LocaleKeys.loginForgotPassword.tr)
          .alignRight()
          .paddingBottom(50.w),

      // 登录按钮
      ButtonWidget.primary(
        LocaleKeys.loginSignIn.tr,
        onTap: controller.onSignIn,
      ).paddingBottom(30.w),

      // OR
      TextWidget.body1(LocaleKeys.loginOrText.tr).paddingBottom(30.w),

      // 其它登录按钮
      <Widget>[
        ButtonWidget.iconTextOutlined(
          IconWidget.svg(AssetsSvgs.facebookSvg),
          "Facebook",
          borderColor: AppColors.surfaceVariant,
          width: 149.w,
          height: 44.w,
        ),
        ButtonWidget.iconTextOutlined(
          IconWidget.svg(AssetsSvgs.googleSvg),
          "Google",
          borderColor: AppColors.surfaceVariant,
          width: 149.w,
          height: 44.w,
        ),
      ].toRow(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
      ),

      // end
    ].toColumn(),
  ).paddingAll(AppSpace.card);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 内容页
Widget _buildView() {
  return SingleChildScrollView(
    child: <Widget>[
      // 头部标题
      PageTitleWidget(
        title: LocaleKeys.loginBackTitle.tr,
        desc: LocaleKeys.loginBackDesc.tr,
      ),

      // 表单
      _buildForm().card(),
    ]
        .toColumn(
          crossAxisAlignment: CrossAxisAlignment.start,
        )
        .paddingHorizontal(AppSpace.page),
  );
}

第 4 步：跳转登录

lib/pages/system/register/controller.dart

1
2
3
4
// 登录
void onSignIn() {
  Get.offNamed(RouteNames.systemLogin);
}

提交代码到 git