6.2 注册表单编写

6.2 注册表单编写

image-20220715120844173

实现步骤：

我们可以养成一个习惯，业务界面一开始就写 i18n 定义

第 1 步：i18n 多语言

lib/common/i18n/locale_keys.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 登录、注册 - 通用
static const loginForgotPassword = 'login_forgot_password';
static const loginSignIn = 'login_sign_in';
static const loginOrText = 'login_or_text';
static const loginSignUp = 'login_sign_up';

// 注册 - register user
static const registerTitle = 'register_title';
static const registerDesc = 'register_desc';
static const registerFormName = 'register_form_name';
static const registerFormEmail = 'register_form_email';
static const registerFormPhoneNumber = 'register_form_phone_number';
static const registerFormPassword = 'register_form_password';
static const registerFormFirstName = 'register_form_first_name';
static const registerFormLastName = 'register_form_last_name';
static const registerHaveAccount = 'register_have_account';

lib/common/i18n/locales/locale_en.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 登录、注册 - 通用
LocaleKeys.loginForgotPassword: 'Forgot Password?',
LocaleKeys.loginSignIn: 'Sign In',
LocaleKeys.loginSignUp: 'Sign Up',
LocaleKeys.loginOrText: '- OR -',

// 注册 - new user
LocaleKeys.registerTitle: 'Register',
LocaleKeys.registerDesc: 'Sign up to continue',
LocaleKeys.registerFormName: 'User Name',
LocaleKeys.registerFormEmail: 'Email',
LocaleKeys.registerFormPhoneNumber: 'Phone number',
LocaleKeys.registerFormPassword: 'Password',
LocaleKeys.registerFormFirstName: 'First name',
LocaleKeys.registerFormLastName: 'Last name',
LocaleKeys.registerHaveAccount: 'Already have an account?',

lib/common/i18n/locales/locale_zh.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 登录、注册 - 通用
LocaleKeys.loginForgotPassword: '忘记密码?',
LocaleKeys.loginSignIn: '登 陆',
LocaleKeys.loginSignUp: '注 册',
LocaleKeys.loginOrText: '- 或者 -',

// 注册 - register user
LocaleKeys.registerTitle: '欢迎',
LocaleKeys.registerDesc: '注册新账号',
LocaleKeys.registerFormName: '登录账号',
LocaleKeys.registerFormEmail: '电子邮件',
LocaleKeys.registerFormPhoneNumber: '电话号码',
LocaleKeys.registerFormPassword: '密码',
LocaleKeys.registerFormFirstName: '姓',
LocaleKeys.registerFormLastName: '名',
LocaleKeys.registerHaveAccount: '你有现成账号?',

第 2 步：抽取页面头部

img

这种放入业务组件目录lib/common/components

lib/common/components/page_title.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
import 'package:flutter/material.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';

// 页面标题 组件
class PageTitleWidget extends StatelessWidget {
  /// 标题
  final String title;

  /// 说明
  final String desc;

  const PageTitleWidget({
    Key? key,
    required this.title,
    required this.desc,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return <Widget>[
      TextWidget.title1(title),
      TextWidget.body2(desc),
    ]
        .toColumn(
          crossAxisAlignment: CrossAxisAlignment.start,
        )
        .padding(
          left: 10,
          top: 10,
          bottom: 30,
        );
  }
}

第 3 步：注册界面

lib/pages/system/register/controller.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 用户名
TextEditingController userNameController =
    TextEditingController(text: "ducafecat5");
// 邮件
TextEditingController emailController =
    TextEditingController(text: "ducafecat5@gmail.com");
// 姓
TextEditingController firstNameController =
    TextEditingController(text: "ducafe");
// 名
TextEditingController lastNameController = TextEditingController(text: "cat");
// 密码
TextEditingController passwordController =
    TextEditingController(text: "12345678");
1
2
3
4
5
6
7
8
9
10
// 释放
@override
void onClose() {
  super.onClose();
  userNameController.dispose();
  emailController.dispose();
  firstNameController.dispose();
  lastNameController.dispose();
  passwordController.dispose();
}
1
2
3
4
5
// 注册
void onSignUp() {}

// 登录
void onSignIn() {}

lib/pages/system/register/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 _buildForm() {
  return Form(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    child: <Widget>[
      // username
      TextFormWidget(
        autofocus: true,
        controller: controller.userNameController,
        labelText: LocaleKeys.registerFormName.tr,
      ),

      // email
      TextFormWidget(
        autofocus: true,
        keyboardType: TextInputType.emailAddress,
        controller: controller.emailController,
        labelText: LocaleKeys.registerFormEmail.tr,
      ),

      // first name
      TextFormWidget(
        autofocus: true,
        controller: controller.firstNameController,
        labelText: LocaleKeys.registerFormFirstName.tr,
      ),

      // last name
      TextFormWidget(
        autofocus: true,
        controller: controller.lastNameController,
        labelText: LocaleKeys.registerFormLastName.tr,
      ),

      // password
      TextFormWidget(
        controller: controller.passwordController,
        labelText: LocaleKeys.registerFormPassword.tr,
        isObscure: true,
      ).paddingBottom(50),

      // 注册按钮
      _buildBtnSignUp(),

      // 提示文字
      _buildTips(),

      //
    ].toColumn(),
  ).paddingAll(AppSpace.card);
}
1
2
3
4
5
6
7
// 按钮
Widget _buildBtnSignUp() {
  return ButtonWidget.primary(
    LocaleKeys.loginSignUp.tr,
    onTap: controller.onSignUp,
  ).paddingBottom(AppSpace.listRow);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 提示
Widget _buildTips() {
  return <Widget>[
    // 提示
    TextWidget.body2(LocaleKeys.registerHaveAccount.tr),
    // 登录文字按钮
    ButtonWidget.text(
      LocaleKeys.loginSignIn.tr,
      onTap: controller.onSignIn,
      textSize: 12,
      textColor: AppColors.primary,
    )
  ].toRow(
    mainAxisAlignment: MainAxisAlignment.center,
  );
}
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.registerTitle.tr,
        desc: LocaleKeys.registerDesc.tr,
      ),

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

第 4 步：进入注册界面

lib/pages/system/splash/controller.dart

1
2
3
_jumpToPage() {
  Get.offAllNamed(RouteNames.main);
}

lib/pages/system/main/controller.dart

1
2
3
4
5
6
7
@override
void onReady() {
  super.onReady();
  _initData();

  Get.toNamed(RouteNames.systemRegister);
}

最后：运行

img

提交代码到 git