feat:倒计时组件功能完善

liangchengyou
1 parent e1f36554
Showing 3 changed files with 41 additions and 50 deletions
lib/common/blocs/timerbloc/timer_bloc.dart
lib/login/forgetpwd/forget_password_home_page.dart
lib/login/loginpage/time_widget.dart
@@ -13,6 +13,10 @@ class TimerBloc extends Bloc&lt;TimerEvent, TimerState&gt; {
   static const int _duration = 60;
   /// 定时器数据流
   final TimerTicker _ticker;
+  /// 是否正在计时
+  bool _isCountTimer = false;
+
+  bool get isCountTimer => _isCountTimer;
   // 流订阅
   StreamSubscription<int>? _tickerSubscription;
   TimerBloc({required TimerTicker ticker})
@@ -33,6 +37,7 @@ class TimerBloc extends Bloc&lt;TimerEvent, TimerState&gt; {
  
   /// 开始计时
   void _onStarted(StartEvent event,Emitter<TimerState> emitter) async {
+    _isCountTimer = true;
     emitter(RunningState(event.duration));
     _tickerSubscription?.cancel();
     _tickerSubscription = _ticker
@@ -42,7 +47,12 @@ class TimerBloc extends Bloc&lt;TimerEvent, TimerState&gt; {
  
   /// 计时中，判断是否剩余时间
   void _onTicked(TickEvent event,Emitter<TimerState> emitter) async {
-    emitter(event.duration>0?RunningState(event.duration):const FinishedState());
+    if(event.duration > 0) {
+      emitter(RunningState(event.duration));
+    } else {
+      _isCountTimer = false;
+      emitter(const FinishedState());
+    }
   }
  
   ///暂停,判断当时是否state为PausedState类型，之后暂停订阅，发送暂停state
@@ -64,6 +74,7 @@ class TimerBloc extends Bloc&lt;TimerEvent, TimerState&gt; {
   /// 重置,初始化
   void _onReset(ResetEvent event ,Emitter<TimerState> emit) async{
     _tickerSubscription?.cancel();
+    _isCountTimer = false;
     emit(const TimerInitial(_duration));
   }
 }
@@ -4,6 +4,7 @@ import &#39;package:flutter_screenutil/flutter_screenutil.dart&#39;;
 import 'package:wow_english/common/extension/string_extension.dart';
 import 'package:wow_english/common/widgets/textfield_customer_widget.dart';
 import 'package:wow_english/login/forgetpwd/bloc/forget_pwd_home_bloc.dart';
+import 'package:wow_english/login/loginpage/time_widget.dart';
 import 'package:wow_english/route/route.dart';
  
 class ForgetPasswordHomePage extends StatelessWidget {
@@ -113,31 +114,7 @@ class _ForgetPasswordHomePageView extends StatelessWidget {
                                             )
                                         ),
                                         16.5.horizontalSpace,
-                                        GestureDetector(
-                                          onTap: () {
-                                            if (bloc.canSendSms) {
-                                              bloc.add(SendSmsCodeEvent());
-                                            }
-                                          },
-                                          child: Container(
-                                            decoration: BoxDecoration(
-                                              image: DecorationImage(
-                                                  image: AssetImage(
-                                                      bloc.canSendSms?'securitycode'.assetPng:'securitycode_dis'.assetPng
-                                                  ),
-                                                  fit: BoxFit.fill
-                                              ),
-                                            ),
-                                            padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0),
-                                            child: const Text(
-                                              '获取验证码',
-                                              style: TextStyle(
-                                                  fontSize: 16,
-                                                  color: Colors.white
-                                              ),
-                                            ),
-                                          ),
-                                        )
+                                        TimerWidget(canSendSms: bloc.canSendSms)
                                       ],
                                     )
                                   ],
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:wow_english/common/blocs/timerbloc/timer_bloc.dart';
 import 'package:wow_english/common/extension/string_extension.dart';
@@ -19,61 +20,50 @@ class TimerWidget extends StatelessWidget {
 }
  
 class TimerWidgetView extends StatelessWidget {
-
   final bool canSendSms;
  
   const TimerWidgetView({super.key, required this.canSendSms});
  
-
   @override
   Widget build(BuildContext context) {
-    bool sendSmsIng = false;
     return BlocListener<TimerBloc,TimerState>(
       listener: (context, s) {
-        if (s is RunningState) {
-          sendSmsIng = true;
-        } if (s is FinishedState) {
-          sendSmsIng = false;
+        if (s is FinishedState) {
+          ///重置计时器
           context.read<TimerBloc>().add(ResetEvent());
-        } else {
-          sendSmsIng = false;
         }
       },
-      child: _buildCountdownWidget(sendSmsIng:sendSmsIng),
+      child: _buildCountdownWidget(),
     );
   }
  
-  Widget _buildCountdownWidget({required bool sendSmsIng}) => BlocBuilder<TimerBloc,TimerState>(
+  Widget _buildCountdownWidget() => BlocBuilder<TimerBloc,TimerState>(
     buildWhen: (prev, state) => prev.runtimeType != state.runtimeType,
     builder: (context,state) {
       final bloc = BlocProvider.of<TimerBloc>(context);
-      final duration = bloc.state.duration;
-      final secondsStr = (duration % 60).floor().toString().padLeft(2, '0');
       return GestureDetector(
         onTap: () {
-          if (canSendSms && !sendSmsIng) {
-            bloc.add(ResetEvent());
+          print(bloc.isCountTimer);
+          if (canSendSms && !bloc.isCountTimer ) {
+            print(state.duration);
+            bloc.add(StartEvent(duration: state.duration));
           }
         },
         child: Container(
           decoration: BoxDecoration(
             image: DecorationImage(
                 image: AssetImage(
-                    canSendSms?'securitycode'.assetPng:'securitycode_dis'.assetPng
+                    canSendSms && !bloc.isCountTimer ? 'securitycode'.assetPng:'securitycode_dis'.assetPng
                 ),
                 fit: BoxFit.fill
             ),
           ),
           padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0),
-          child:  Row(
+          child: Row(
             children: [
-              if (state is TimerInitial)...[
-                const Text('获取验证码')
-              ],
               if (state is RunningState)...[
-                Text('${secondsStr}s倒计时')
-              ],
-              if (state is FinishedState) ...[
+                const TimerText()
+              ] else ...[
                 const Text('获取验证码')
               ]
             ],
@@ -82,4 +72,17 @@ class TimerWidgetView extends StatelessWidget {
       );
     },
   );
-}
 \ No newline at end of file
+}
+
+class TimerText extends StatelessWidget {
+  const TimerText({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final duration = context.select((TimerBloc bloc) => bloc.state.duration);
+    final secondsStr = duration.toString().padLeft(2, '0');
+    return Text(
+      '${secondsStr}s后再次获取',
+    );
+  }
+}