fix(mobile-app): 修复短信验证码界面问题

- 减小验证码输入框字体大小从 24.sp 到 20.sp,防止在某些设备上被截断
- 添加行高 height: 1.2 确保文字垂直居中
- 在手机号注册页面添加 60 秒倒计时功能
- 倒计时期间禁用获取验证码按钮
- 显示剩余秒数提示 "X秒后重新发送"
This commit is contained in:
hailin 2025-12-20 17:40:09 -08:00
parent 1edbe7a9c9
commit cdb55ec4cb
2 changed files with 35 additions and 5 deletions

View File

@ -1,3 +1,4 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
@ -35,6 +36,11 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
bool _isSending = false;
String? _errorMessage;
//
int _countdown = 0;
Timer? _countdownTimer;
bool _canSend = true;
@override
void initState() {
super.initState();
@ -44,12 +50,31 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
@override
void dispose() {
_countdownTimer?.cancel();
_phoneController.removeListener(_onPhoneChanged);
_phoneController.dispose();
_phoneFocusNode.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() {
//
if (_errorMessage != null) {
@ -93,6 +118,9 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
if (!mounted) return;
//
_startCountdown();
//
context.push(
RoutePaths.smsVerify,
@ -275,14 +303,15 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
Widget _buildNextButton() {
final isValid = _isValidPhoneNumber(_phoneController.text.trim());
final canClick = isValid && !_isSending && _canSend;
return GestureDetector(
onTap: isValid && !_isSending ? _sendSmsCode : null,
onTap: canClick ? _sendSmsCode : null,
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(vertical: 16.h),
decoration: BoxDecoration(
color: isValid && !_isSending
color: canClick
? const Color(0xFF2E7D32)
: const Color(0xFFE0E0E0),
borderRadius: BorderRadius.circular(12.r),
@ -298,11 +327,11 @@ class _PhoneRegisterPageState extends ConsumerState<PhoneRegisterPage> {
),
)
: Text(
'获取验证码',
!_canSend ? '$_countdown秒后重新发送' : '获取验证码',
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w600,
color: isValid ? Colors.white : const Color(0xFF999999),
color: canClick ? Colors.white : const Color(0xFF999999),
),
),
),

View File

@ -404,9 +404,10 @@ class _SmsVerifyPageState extends ConsumerState<SmsVerifyPage> {
),
),
style: TextStyle(
fontSize: 24.sp,
fontSize: 20.sp,
fontWeight: FontWeight.w700,
color: const Color(0xFF333333),
height: 1.2,
),
onChanged: (value) => _onCodeChanged(index, value),
),