请用Dart语言编写含多登录场景的注册界面代码
Flutter 登录/注册多状态界面实现
以下是满足需求的完整Dart代码(基于Flutter框架),实现了注册、登录、Google快捷登录三种状态的切换及对应功能:
import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; // 定义界面状态枚举 enum AuthScreenState { login, register, googleAuth } void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Auth Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const AuthScreen(), ); } } class AuthScreen extends StatefulWidget { const AuthScreen({super.key}); @override State<AuthScreen> createState() => _AuthScreenState(); } class _AuthScreenState extends State<AuthScreen> { AuthScreenState _currentState = AuthScreenState.login; final _formKey = GlobalKey<FormState>(); final _passwordController = TextEditingController(); final _confirmPasswordController = TextEditingController(); DateTime? _selectedDob; String? _selectedGender; // 切换界面状态 void _switchState(AuthScreenState newState) { setState(() { _currentState = newState; _formKey.currentState?.reset(); _selectedDob = null; _selectedGender = null; }); } // 显示日期选择器 Future<void> _showDatePicker() async { final pickedDate = await showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(1900), lastDate: DateTime.now(), ); if (pickedDate != null) { setState(() { _selectedDob = pickedDate; }); } } // 显示忘记密码对话框 void _showForgetPasswordDialog() { showDialog( context: context, builder: (ctx) => AlertDialog( title: const Text('找回密码'), content: Column( mainAxisSize: MainAxisSize.min, children: [ const Text('请选择找回方式:'), const SizedBox(height: 16), ElevatedButton( onPressed: () { Navigator.pop(ctx); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('已发送验证码到你的手机号')), ); }, child: const Text('通过手机号找回'), ), const SizedBox(height: 8), ElevatedButton( onPressed: () { Navigator.pop(ctx); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('已发送重置链接到你的邮箱')), ); }, child: const Text('通过邮箱找回'), ), ], ), ), ); } // 提交表单(登录/注册/Google登录) void _submitForm() { if (_formKey.currentState!.validate()) { switch (_currentState) { case AuthScreenState.login: ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('登录成功!')), ); break; case AuthScreenState.register: ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('注册成功!')), ); break; case AuthScreenState.googleAuth: ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Google登录成功!')), ); break; } } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('用户认证')), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ // 顶部切换按钮 if (_currentState == AuthScreenState.login) Row( mainAxisAlignment: MainAxisAlignment.center, children: [ TextButton( onPressed: () => _switchState(AuthScreenState.register), child: const Text('Create an account'), ), const Text(' | '), TextButton( onPressed: () => _switchState(AuthScreenState.googleAuth), child: const Text('Continue with Google'), ), ], ) else if (_currentState == AuthScreenState.register) TextButton( onPressed: () => _switchState(AuthScreenState.login), child: const Text('已有账号?登录'), ) else TextButton( onPressed: () => _switchState(AuthScreenState.login), child: const Text('返回普通登录'), ), const SizedBox(height: 24), // 表单区域 Expanded( child: Form( key: _formKey, child: ListView( children: [ // 登录表单 if (_currentState == AuthScreenState.login) ...[ TextFormField( decoration: const InputDecoration(labelText: '邮箱'), keyboardType: TextInputType.emailAddress, validator: (value) { if (value == null || value.isEmpty || !value.contains('@')) { return '请输入有效的邮箱地址'; } return null; }, ), const SizedBox(height: 16), TextFormField( decoration: const InputDecoration(labelText: '密码'), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return '请输入密码'; } return null; }, ), const SizedBox(height: 8), Align( alignment: Alignment.centerRight, child: TextButton( onPressed: _showForgetPasswordDialog, child: const Text('Forget Password'), ), ), const SizedBox(height: 24), ElevatedButton( onPressed: _submitForm, child: const Text('登录'), ), ] // 注册表单 else if (_currentState == AuthScreenState.register) ...[ TextFormField( decoration: const InputDecoration(labelText: '姓名'), validator: (value) { if (value == null || value.isEmpty) { return '请输入姓名'; } return null; }, ), const SizedBox(height: 16), TextFormField( decoration: const InputDecoration(labelText: '电话号码'), keyboardType: TextInputType.phone, validator: (value) { if (value == null || value.isEmpty || value.length < 10) { return '请输入有效的电话号码'; } return null; }, ), const SizedBox(height: 16), TextFormField( decoration: const InputDecoration(labelText: '邮箱'), keyboardType: TextInputType.emailAddress, validator: (value) { if (value == null || value.isEmpty || !value.contains('@')) { return '请输入有效的邮箱地址'; } return null; }, ), const SizedBox(height: 16), InkWell( onTap: _showDatePicker, child: InputDecorator( decoration: const InputDecoration(labelText: 'DOB(出生日期)'), child: Text( _selectedDob == null ? '请选择日期' : DateFormat('yyyy-MM-dd').format(_selectedDob!), ), ), ), const SizedBox(height: 16), const Text('性别'), Row( children: [ Radio<String>( value: 'male', groupValue: _selectedGender, onChanged: (value) { setState(() { _selectedGender = value; }); }, ), const Text('男'), Radio<String>( value: 'female', groupValue: _selectedGender, onChanged: (value) { setState(() { _selectedGender = value; }); }, ), const Text('女'), ], ), const SizedBox(height: 16), TextFormField( decoration: const InputDecoration(labelText: '用户名'), validator: (value) { if (value == null || value.isEmpty) { return '请输入用户名'; } return null; }, ), const SizedBox(height: 16), TextFormField( controller: _passwordController, decoration: const InputDecoration(labelText: '密码'), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return '请输入密码'; } // 验证密码包含普通字符、特殊字符、数字 final hasLetter = RegExp(r'[a-zA-Z]').hasMatch(value); final hasNumber = RegExp(r'[0-9]').hasMatch(value); final hasSpecialChar = RegExp(r'[!@#$%^&*(),.?":{}|<>]').hasMatch(value); if (!hasLetter || !hasNumber || !hasSpecialChar) { return '密码需包含字母、数字和特殊字符'; } return null; }, ), const SizedBox(height: 16), TextFormField( controller: _confirmPasswordController, decoration: const InputDecoration(labelText: '确认密码'), obscureText: true, validator: (value) { if (value != _passwordController.text) { return '两次输入的密码不一致'; } return null; }, ), const SizedBox(height: 24), ElevatedButton( onPressed: _submitForm, child: const Text('注册'), ), ] // Google登录表单 else ...[ TextFormField( decoration: const InputDecoration(labelText: '邮箱'), keyboardType: TextInputType.emailAddress, validator: (value) { if (value == null || value.isEmpty || !value.contains('@')) { return '请输入有效的邮箱地址'; } return null; }, ), const SizedBox(height: 16), TextFormField( decoration: const InputDecoration(labelText: '密码'), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return '请输入密码'; } return null; }, ), const SizedBox(height: 16), TextFormField( decoration: const InputDecoration(labelText: '验证码'), keyboardType: TextInputType.number, validator: (value) { if (value == null || value.isEmpty || value.length != 6) { return '请输入6位验证码'; } return null; }, ), const SizedBox(height: 24), ElevatedButton( onPressed: _submitForm, child: const Text('Continue with Google'), ), ], ], ), ), ), ], ), ), ); } }
功能说明:
- 状态切换:初始显示登录界面,点击「Create an account」切换到注册表单,点击「Continue with Google」切换到Google登录表单,各表单可返回切换至其他状态。
- 注册表单:包含姓名、电话、邮箱、出生日期(日期选择器)、性别单选、用户名、密码(带强度验证)、确认密码字段,表单验证通过后显示注册成功提示。
- 登录表单:包含邮箱、密码输入框,点击「Forget Password」弹出对话框支持手机号/邮箱找回密码,登录验证通过后显示登录成功提示。
- Google登录表单:包含邮箱、密码、验证码输入框,验证通过后显示登录成功提示。
内容的提问来源于stack exchange,提问作者Sidra Ahmed
相关产品推荐
相关产品推荐

