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/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),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
),
|
||||
|
|
|
|||
Loading…
Reference in New Issue