【HarmonyOS】DAY13：Flutter电商实战：从零开发注册页面（含密码验证、确认密码完整实现）

Flutter电商实战：从零开发注册页面（含密码验证、确认密码完整实现）

前言

在电商应用中，注册页面是用户获取账号的第一步。一个设计简洁、体验流畅的注册页面能够有效提升用户注册转化率。本文将带你从零开始实现一个完整的Flutter注册页面，包含密码验证、确认密码、验证码倒计时等完整功能。

参考文章：【开源鸿蒙跨平台开发先锋训练营】DAY15～DAY19为开源鸿蒙跨平台应用全面集成添加核心场景-注册页面

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

一、项目背景

本文基于一个Flutter跨平台电商项目，是登录功能的延伸，技术栈如下：

• Flutter版本：3.x
• 前置功能：登录页面（已完成）
• 开发目标：实现完整的用户注册功能

二、功能需求分析

2.1 核心功能

2.2 开发流程

需求分析 → 密码验证规则设计 → API接口封装 → 注册页面UI → 登录页面集成 → 测试

三、密码验证规则设计

3.1 密码强度要求

// 验证密码格式bool_isValidPassword(Stringpassword){// 密码长度6-20位，包含字母和数字returnRegExp(r'^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$').hasMatch(password);}

密码规则说明：

• 长度：6-20位
• 必须包含：至少一个字母 + 至少一个数字
• 不允许：特殊字符

四、API接口封装

4.1 注册相关接口

文件路径：lib/api/register.dart

import'package:harmonyos_day_four/utils/DioRequest.dart';/// 获取注册验证码Future<void>getRegisterCodeAPI(Stringphone)async{// 实际项目中调用真实API// await dioRequest.post('/auth/register/send-code', data: {'phone': phone});// 模拟请求延迟awaitFuture.delayed(constDuration(milliseconds:500));}/// 注册/// phone: 手机号/// code: 验证码/// password: 密码Future<void>registerAPI(Stringphone,Stringcode,Stringpassword)async{// 实际项目中调用真实API// await dioRequest.post('/auth/register', data: {// 'phone': phone,// 'code': code,// 'password': password,// });// 模拟请求延迟awaitFuture.delayed(constDuration(seconds:1));}

五、注册页面UI实现

5.1 页面结构

文件路径：lib/pages/register/index.dart

页面布局结构：

Scaffold ├── SafeArea │ └── SingleChildScrollView │ ├── 返回按钮 │ ├── Logo和标题 │ ├── 手机号输入框 │ ├── 验证码输入框（含倒计时按钮） │ ├── 密码输入框（含显示/隐藏） │ ├── 确认密码输入框（含显示/隐藏） │ ├── 注册按钮 │ ├── 协议勾选 │ └── 已有账号跳转登录

5.2 状态管理

class_RegisterPageStateextendsState<RegisterPage>{finalTextEditingController_phoneController=TextEditingController();finalTextEditingController_codeController=TextEditingController();finalTextEditingController_passwordController=TextEditingController();finalTextEditingController_confirmPasswordController=TextEditingController();bool _agreeToTerms=false;// 是否同意协议bool _isRegistering=false;// 是否正在注册int _countdown=0;// 验证码倒计时秒数bool _showPassword=false;// 是否显示密码bool _showConfirmPassword=false;// 是否显示确认密码finalColor_primaryColor=constColor(0xFFFF6B00);// ...}

5.3 返回按钮

Widget_buildBackButton(){returnGestureDetector(onTap:()=>Navigator.pop(context),child:Container(width:40,height:40,decoration:BoxDecoration(color:Colors.grey[100],shape:BoxShape.circle,),child:constIcon(Icons.arrow_back,size:20),),);}

5.4 密码输入框（含显示/隐藏）

Widget_buildPasswordInput(){returnContainer(decoration:BoxDecoration(color:Colors.grey[100],borderRadius:BorderRadius.circular(12),),child:TextField(controller:_passwordController,obscureText:!_showPassword,// 控制密码显示/隐藏decoration:InputDecoration(hintText:'请输入密码(6-20位，含字母和数字)',prefixIcon:constIcon(Icons.lock_outline),suffixIcon:GestureDetector(onTap:(){setState((){_showPassword=!_showPassword;// 切换显示状态});},child:Icon(_showPassword?Icons.visibility_outlined// 睁眼图标:Icons.visibility_off_outlined,// 闭眼图标color:Colors.grey[400],),),border:InputBorder.none,contentPadding:constEdgeInsets.symmetric(horizontal:16,vertical:16),),),);}

实现要点：

• 使用obscureText控制密码显示/隐藏
• 使用suffixIcon添加眼睛图标
• 点击图标切换_showPassword状态

5.5 确认密码输入框

Widget_buildConfirmPasswordInput(){returnContainer(decoration:BoxDecoration(color:Colors.grey[100],borderRadius:BorderRadius.circular(12),),child:TextField(controller:_confirmPasswordController,obscureText:!_showConfirmPassword,decoration:InputDecoration(hintText:'请确认密码',prefixIcon:constIcon(Icons.lock_outline),suffixIcon:GestureDetector(onTap:(){setState((){_showConfirmPassword=!_showConfirmPassword;});},child:Icon(_showConfirmPassword?Icons.visibility_outlined:Icons.visibility_off_outlined,color:Colors.grey[400],),),border:InputBorder.none,contentPadding:constEdgeInsets.symmetric(horizontal:16,vertical:16),),),);}

5.6 注册验证逻辑

Future<void>_register()async{// 1. 验证手机号if(!_isValidPhone(_phoneController.text)){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('请输入正确的手机号')),);return;}// 2. 验证验证码if(_codeController.text.isEmpty){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('请输入验证码')),);return;}// 3. 验证密码if(_passwordController.text.isEmpty){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('请输入密码')),);return;}if(!_isValidPassword(_passwordController.text)){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('密码长度6-20位，必须包含字母和数字')),);return;}// 4. 验证确认密码if(_confirmPasswordController.text!=_passwordController.text){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('两次密码输入不一致')),);return;}// 5. 验证协议if(!_agreeToTerms){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('请先同意用户协议和隐私政策')),);return;}// 6. 执行注册setState((){_isRegistering=true;});try{awaitregisterAPI(_phoneController.text,_codeController.text,_passwordController.text,);if(!mounted)return;// 注册成功，返回登录页面ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('注册成功，请登录')),);Navigator.pop(context);}catch(e){if(!mounted)return;ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text('注册失败:$e')),);}finally{if(mounted){setState((){_isRegistering=false;});}}}

5.7 已有账号跳转

Widget_buildLoginLink(){returnRow(mainAxisAlignment:MainAxisAlignment.center,children:[Text('已有账号？',style:TextStyle(fontSize:14,color:Colors.grey[600]),),GestureDetector(onTap:_goToLogin,// 跳转到登录页面child:constText('立即登录',style:TextStyle(fontSize:14,color:Color(0xFFFF6B00),fontWeight:FontWeight.w600,),),),],);}// 跳转到登录页面void_goToLogin(){Navigator.pop(context);// 返回登录页面}

六、登录页面集成

6.1 添加注册入口

文件路径：lib/pages/login/index.dart

// 添加导入import'package:harmonyos_day_four/pages/register/index.dart';// 添加跳转方法void_goToRegister(){Navigator.push(context,MaterialPageRoute(builder:(context)=>constRegisterPage()),);}// 修改欢迎文字Row(children:[Text('还没有账号？',style:TextStyle(color:Colors.grey[600])),GestureDetector(onTap:_goToRegister,// 点击跳转注册child:constText('去注册',style:TextStyle(color:Color(0xFFFF6B00),fontWeight:FontWeight.w600,),),),],)

七、遇到的问题及解决方法

问题1：密码明文显示不够安全

问题描述：
密码输入框默认明文显示，用户输入时容易被他人看到。

解决方法：

TextField(obscureText:!_showPassword,// 控制密码显示/隐藏decoration:InputDecoration(suffixIcon:GestureDetector(onTap:(){setState((){_showPassword=!_showPassword;// 切换状态});},child:Icon(_showPassword?Icons.visibility_outlined// 显示时：睁眼:Icons.visibility_off_outlined,// 隐藏时：闭眼),),),)

问题2：用户可能输错密码

问题描述：
用户在输入密码时可能打错，导致无法登录。

解决方法：

添加确认密码输入框，验证两次密码是否一致：

// 验证确认密码if(_confirmPasswordController.text!=_passwordController.text){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('两次密码输入不一致')),);return;}

问题3：密码提示不够清晰

问题描述：
用户不知道密码格式要求，导致多次输入错误。

解决方法：

在输入框的 hintText 中明确提示密码要求：

TextField(decoration:InputDecoration(hintText:'请输入密码(6-20位，含字母和数字)',),)

问题4：注册成功后直接进入应用

问题描述：
用户注册成功后应该先登录，而不是直接进入应用。

解决方法：

注册成功后返回登录页面：

// 注册成功ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('注册成功，请登录')),);Navigator.pop(context);// 返回登录页面

问题5：注册页面没有返回按钮

问题描述：
用户进入注册页面后无法返回登录页面。

解决方法：

在注册页面顶部添加返回按钮：

Widget_buildBackButton(){returnGestureDetector(onTap:()=>Navigator.pop(context),// 返回上一页child:Container(width:40,height:40,decoration:BoxDecoration(color:Colors.grey[100],shape:BoxShape.circle,),child:constIcon(Icons.arrow_back,size:20),),);}

八、页面配色方案

九、项目结构

lib/ ├── api/ │ └── register.dart # 注册API接口 ├── pages/ │ ├── register/ │ │ └── index.dart # 注册页面（新建） │ └── login/ │ └── index.dart # 登录页面（已修改） └── viewmodels/ └── user.dart # 用户数据模型

十、完整注册流程

1. 用户在登录页面点击"去注册" ↓ 2. 跳转到注册页面 ↓ 3. 输入手机号（格式验证） ↓ 4. 点击"获取验证码"（60秒倒计时） ↓ 5. 输入验证码 ↓ 6. 输入密码（6-20位，含字母和数字） ↓ 7. 输入确认密码（与密码一致） ↓ 8. 勾选协议 ↓ 9. 点击"注册"按钮 ↓ 10. 注册成功，返回登录页面 ↓ 11. 用户可以使用新账号登录

十一、与登录页面的对比

十二、后续优化建议

十三、总结

本文实现了一个完整的Flutter电商注册页面，包含以下核心功能：

1. 手机号验证- 使用正则表达式验证手机号格式
2. 密码强度验证- 6-20位，必须包含字母和数字
3. 确认密码验证- 确保两次密码输入一致
4. 密码显示/隐藏- 保护用户隐私
5. 验证码倒计时- 60秒倒计时，防止重复获取
6. 页面跳转- 登录页面与注册页面互相跳转

关键点总结：

• 密码验证使用正则表达式^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$
• 使用obscureText控制密码显示/隐藏
• 注册成功后返回登录页面，让用户完成登录
• 在输入框提示中明确密码格式要求

十四、参考资料

• Flutter官方文档 - TextField class
• Dart正则表达式 - RegExp class
• CSDN - 开源鸿蒙跨平台开发先锋训练营

如果本文对你有帮助，欢迎点赞、收藏、评论！

📕个人领域：Linux/C++/java/AI
🚀个人主页：有点流鼻涕 · CSDN
💬座右铭：“向光而行，沐光而生。”