fix(mobile-app): 修复短信验证码界面问题
- 减小验证码输入框字体大小从 24.sp 到 20.sp,防止在某些设备上被截断 - 添加行高 height: 1.2 确保文字垂直居中 - 在手机号注册页面添加 60 秒倒计时功能 - 倒计时期间禁用获取验证码按钮 - 显示剩余秒数提示 "X秒后重新发送"
This commit is contained in:
parent
1edbe7a9c9
commit
cdb55ec4cb
|
|
@ -1,3 +1,4 @@
|
||||||
|
import 'dart:async';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter/services.dart';
|
import 'package:flutter/services.dart';
|
||||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
|
|
@ -35,6 +36,11 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
|
||||||
bool _isSending = false;
|
bool _isSending = false;
|
||||||
String? _errorMessage;
|
String? _errorMessage;
|
||||||
|
|
||||||
|
// 倒计时
|
||||||
|
int _countdown = 0;
|
||||||
|
Timer? _countdownTimer;
|
||||||
|
bool _canSend = true;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
super.initState();
|
super.initState();
|
||||||
|
|
@ -44,12 +50,31 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void dispose() {
|
void dispose() {
|
||||||
|
_countdownTimer?.cancel();
|
||||||
_phoneController.removeListener(_onPhoneChanged);
|
_phoneController.removeListener(_onPhoneChanged);
|
||||||
_phoneController.dispose();
|
_phoneController.dispose();
|
||||||
_phoneFocusNode.dispose();
|
_phoneFocusNode.dispose();
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void _startCountdown() {
|
||||||
|
_countdown = 60;
|
||||||
|
_canSend = false;
|
||||||
|
_countdownTimer?.cancel();
|
||||||
|
_countdownTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
|
||||||
|
if (_countdown > 0) {
|
||||||
|
setState(() {
|
||||||
|
_countdown--;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setState(() {
|
||||||
|
_canSend = true;
|
||||||
|
});
|
||||||
|
timer.cancel();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
void _onPhoneChanged() {
|
void _onPhoneChanged() {
|
||||||
// 清除错误信息
|
// 清除错误信息
|
||||||
if (_errorMessage != null) {
|
if (_errorMessage != null) {
|
||||||
|
|
@ -93,6 +118,9 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
|
||||||
|
|
||||||
if (!mounted) return;
|
if (!mounted) return;
|
||||||
|
|
||||||
|
// 启动倒计时
|
||||||
|
_startCountdown();
|
||||||
|
|
||||||
// 跳转到验证码页面
|
// 跳转到验证码页面
|
||||||
context.push(
|
context.push(
|
||||||
RoutePaths.smsVerify,
|
RoutePaths.smsVerify,
|
||||||
|
|
@ -275,14 +303,15 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
|
||||||
|
|
||||||
Widget _buildNextButton() {
|
Widget _buildNextButton() {
|
||||||
final isValid = _isValidPhoneNumber(_phoneController.text.trim());
|
final isValid = _isValidPhoneNumber(_phoneController.text.trim());
|
||||||
|
final canClick = isValid && !_isSending && _canSend;
|
||||||
|
|
||||||
return GestureDetector(
|
return GestureDetector(
|
||||||
onTap: isValid && !_isSending ? _sendSmsCode : null,
|
onTap: canClick ? _sendSmsCode : null,
|
||||||
child: Container(
|
child: Container(
|
||||||
width: double.infinity,
|
width: double.infinity,
|
||||||
padding: EdgeInsets.symmetric(vertical: 16.h),
|
padding: EdgeInsets.symmetric(vertical: 16.h),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: isValid && !_isSending
|
color: canClick
|
||||||
? const Color(0xFF2E7D32)
|
? const Color(0xFF2E7D32)
|
||||||
: const Color(0xFFE0E0E0),
|
: const Color(0xFFE0E0E0),
|
||||||
borderRadius: BorderRadius.circular(12.r),
|
borderRadius: BorderRadius.circular(12.r),
|
||||||
|
|
@ -298,11 +327,11 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
: Text(
|
: Text(
|
||||||
'获取验证码',
|
!_canSend ? '$_countdown秒后重新发送' : '获取验证码',
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 16.sp,
|
fontSize: 16.sp,
|
||||||
fontWeight: FontWeight.w600,
|
fontWeight: FontWeight.w600,
|
||||||
color: isValid ? Colors.white : const Color(0xFF999999),
|
color: canClick ? Colors.white : const Color(0xFF999999),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
|
|
@ -404,9 +404,10 @@ class _SmsVerifyPageState extends ConsumerState<SmsVerifyPage> {
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 24.sp,
|
fontSize: 20.sp,
|
||||||
fontWeight: FontWeight.w700,
|
fontWeight: FontWeight.w700,
|
||||||
color: const Color(0xFF333333),
|
color: const Color(0xFF333333),
|
||||||
|
height: 1.2,
|
||||||
),
|
),
|
||||||
onChanged: (value) => _onCodeChanged(index, value),
|
onChanged: (value) => _onCodeChanged(index, value),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue