6.5 Pin 界面编写

6.5 Pin 界面编写

image-20220715153443218

实现步骤：

第 1 步：i18n 多语言

lib/common/i18n/locale_keys.dart

1
2
3
4
5
// 注册PIN - register pin
static const registerPinTitle = 'register_pin_title';
static const registerPinDesc = 'register_pin_desc';
static const registerPinFormTip = 'register_pin_form_tip';
static const registerPinButton = 'register_pin_button';

lib/common/i18n/locales/locale_en.dart

1
2
3
4
5
// 注册PIN - register pin
LocaleKeys.registerPinTitle: 'Verification',
LocaleKeys.registerPinDesc: 'we will send you a Pin to continue your account',
LocaleKeys.registerPinFormTip: 'Pin',
LocaleKeys.registerPinButton: 'Submit',

lib/common/i18n/locales/locale_zh.dart

1
2
3
4
5
// 注册PIN - register pin
LocaleKeys.registerPinTitle: '验证',
LocaleKeys.registerPinDesc: '我们将向您发送PIN码以继续您的帐户',
LocaleKeys.registerPinFormTip: 'Pin',
LocaleKeys.registerPinButton: '提交',

第 2 步：pin 界面

lib/pages/system/register_pin/controller.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
class RegisterPinController extends GetxController {
  RegisterPinController();

  // ping 文字输入控制器
  TextEditingController pinController = TextEditingController();

  // 表单 key
  GlobalKey formKey = GlobalKey<FormState>();

  // pin 触发提交
  void onPinSubmit(String val) {
    debugPrint("onPinSubmit: $val");
  }

  // 按钮提交
  void onBtnSubmit() {
  }

  // 按钮返回
  void onBtnBackup() {
    Get.back();
  }

  @override
  void onClose() {
    super.onClose();
    pinController.dispose();
  }
}

lib/pages/system/register_pin/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
// 表单页
Widget _buildForm() {
  return Form(
    key: controller.formKey, //设置globalKey，用于后面获取FormState
    autovalidateMode: AutovalidateMode.onUserInteraction,
    child: <Widget>[
      // 提示文
      TextWidget.body1(LocaleKeys.registerPinFormTip.tr)
          .paddingBottom(20.w)
          .alignLeft(),

      // pin
      PinPutWidget(
        controller: controller.pinController,
        validator: controller.pinValidator, // 验证函数
        onSubmit: controller.onPinSubmit,
      ).paddingBottom(50.w),

      // 提交按钮
      ButtonWidget.primary(
        LocaleKeys.registerPinButton.tr,
        onTap: controller.onBtnSubmit,
      ).paddingBottom(AppSpace.listRow),

      // 返回按钮
      ButtonWidget.text(
        LocaleKeys.commonBottomCancel.tr,
        onTap: controller.onBtnBackup,
      ),

      // 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.registerPinTitle.tr,
        desc: LocaleKeys.registerPinDesc.tr,
      ),

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

第 3 步：验证

lib/pages/system/register_pin/controller.dart

1
2
3
4
5
6
// 验证 pin
String? pinValidator(val) {
  return val == '111111'
      ? null
      : LocaleKeys.commonMessageIncorrect.trParams({"method": "Pin"});
}

默认 pin 111111

lib/pages/system/register_pin/view.dart

1
2
3
4
5
6
// pin
PinPutWidget(
  controller: controller.pinController,
  validator: controller.pinValidator, // 验证函数
  onSubmit: controller.onPinSubmit,
).paddingBottom(50.w),

第 4 步：注册进入 Pin 界面

lib/pages/system/register/controller.dart

1
2
3
4
5
6
7
// 注册
void onSignUp() {
  if ((formKey.currentState as FormState).validate()) {
    // 验证通过提交数据
    Get.toNamed(RouteNames.systemRegisterPin);
  }
}

最后：运行

img

提交代码到 git