feat:解决异步场景下setState泄漏问题（setState() called after dispose(): _SpeakerWidgetState#…

…47f43(lifecycle state: defunct, not mounted, ticker inactive)）

feat:解决异步场景下setState泄漏问题（setState() called after dispose(): _SpeakerWidgetState#…
…47f43(lifecycle state: defunct, not mounted, ticker inactive)）
吴启风
1 parent b81332ca
Showing 5 changed files with 94 additions and 95 deletions
lib/common/widgets/cheer_reward_widget.dart
lib/common/widgets/record_playback_widget.dart
lib/common/widgets/recorder_widget.dart
lib/common/widgets/speaker_widget.dart
lib/common/widgets/star_reward_widget.dart
@@ -46,16 +46,10 @@ class _CheerRewardWidgetState extends State&lt;CheerRewardWidget&gt;
   }
   void _loadComposition() {
-    // final composition = await AssetLottie('assets/lotties/recorder_input.zip').load();
-    // setState(() {
-    //   _composition = composition;
-    //   _controller.duration = _composition.duration;
-    // });
-
     _futureComposition = _loadLottieComposition();
     if (widget.isPlaying) {
-        _startAnimation();
+      _startAnimation();
     }
   }
@@ -69,10 +63,12 @@ class _CheerRewardWidgetState extends State&lt;CheerRewardWidget&gt;
       Log.d("$TAG _futureComposition.then duration=${composition.duration}");
       _controller.duration = composition.duration;
       _controller.forward().whenCompleteOrCancel(() {
-        setState(() {
-          _isVisible = false;
-        });
-        widget.onAnimationEnd(); // 调用外部回调函数
+        if (mounted) {
+          setState(() {
+            _isVisible = false;
+          });
+          widget.onAnimationEnd(); // 调用外部回调函数
+        }
       });
     });
   }
@@ -108,16 +104,7 @@ class _CheerRewardWidgetState extends State&lt;CheerRewardWidget&gt;
                 } else {
                   return const SizedBox.shrink();
                 }
-              })
-
-          // child: Lottie(
-          //   composition: _composition,
-          //   controller: _controller,
-          //   renderCache: RenderCache.raster,
-          //   width: widget.width,
-          //   height: widget.height,
-          // ),
-          ),
+              })),
     );
   }
 }
@@ -5,14 +5,14 @@ import &#39;package:wow_english/common/widgets/throttledGesture_gesture_detector.dar
 import '../../utils/log_util.dart';
 /// 录音组件
-class _RecorderPlaybackWidget extends StatefulWidget {
+class RecorderPlaybackWidget extends StatefulWidget {
   final bool isClickable;
   final bool isPlaying;
   final VoidCallback? onTap;
   final double width;
   final double height;
-  const _RecorderPlaybackWidget({
+  const RecorderPlaybackWidget({
     Key? key,
     required this.isClickable,
     required this.isPlaying,
@@ -22,14 +22,13 @@ class _RecorderPlaybackWidget extends StatefulWidget {
   }) : super(key: key);
   @override
-  _RecorderPlaybackWidgetState createState() =>
-      _RecorderPlaybackWidgetState();
+  _RecorderPlaybackWidgetState createState() => _RecorderPlaybackWidgetState();
 }
-class _RecorderPlaybackWidgetState extends State<_RecorderPlaybackWidget>
+class _RecorderPlaybackWidgetState extends State<RecorderPlaybackWidget>
     with SingleTickerProviderStateMixin {
   late final AnimationController _controller;
-  late final LottieComposition _composition;
+  late final Future<LottieComposition> _futureComposition;
   static const String TAG = "RecorderPlaybackWidget";
   bool _isPlaying = false;
@@ -39,47 +38,63 @@ class _RecorderPlaybackWidgetState extends State&lt;_RecorderPlaybackWidget&gt;
     super.initState();
     _controller = AnimationController(vsync: this);
     _loadComposition();
+    if (widget.isPlaying) {
+      _playAnimation();
+    }
     _controller.addListener(() {
       // Log.d("$TAG addListener _controller=${_controller.status}");
     });
   }
-  Future<void> _loadComposition() async {
-    final composition =
-        await AssetLottie('assets/lotties/recorder_back.zip').load();
-    setState(() {
-      _composition = composition;
-      _controller.duration = _composition.duration;
-    });
-
-    if (widget.isPlaying) {
+  @override
+  void didUpdateWidget(RecorderPlaybackWidget oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    Log.d(
+        "$TAG ${identityHashCode(this)} didUpdateWidget widget=${widget.isPlaying} oldWidget=${oldWidget.isPlaying} _isPlaying=$_isPlaying");
+    if (widget.isPlaying && !_isPlaying) {
+      setState(() {
+        _isPlaying = true;
+      });
       _playAnimation();
+    } else if (!widget.isPlaying && _isPlaying) {
+      _stopAnimation();
+    }
+
+    if (!_isPlaying) {
+      _displayAnimation(widget.isClickable);
     }
   }
+  Future<void> _loadComposition() async {
+    _futureComposition = AssetLottie('assets/lotties/recorder_back.zip').load();
+  }
+
   void _playAnimation() {
     _controller.reset();
-    _controller.repeat(
-      min: 2 / _composition.endFrame,
-      max: 22 / _composition.endFrame,
-    );
+    _futureComposition.then((composition) {
+      _controller.duration = composition.duration;
+      _controller.repeat(
+        min: 2 / composition.endFrame,
+        max: 20 / composition.endFrame,
+      );
+    });
   }
   void _stopAnimation() {
     _controller.stop();
-    _resetAnimation();
-  }
-
-  void _resetAnimation() {
-    setState(() {
-      _isPlaying = false;
-      _controller.value = 1;
-      // _controller.repeat(
-      //   min: 1 / _composition.endFrame,
-      //   max: 1 / _composition.endFrame,
-      // );
-    });
+    if (mounted) {
+      setState(() {
+        _isPlaying = false;
+        _futureComposition.then((composition) {
+          _controller.value = 1 / composition.endFrame;
+        });
+        // _controller.repeat(
+        //   min: 1 / _composition.endFrame,
+        //   max: 1 / _composition.endFrame,
+        // );
+      });
+    }
   }
   void _displayAnimation(bool clickable) {
@@ -99,25 +114,6 @@ class _RecorderPlaybackWidgetState extends State&lt;_RecorderPlaybackWidget&gt;
   }
   @override
-  void didUpdateWidget(_RecorderPlaybackWidget oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    Log.d(
-        "$TAG didUpdateWidget widget=${widget.isPlaying} oldWidget=${oldWidget.isPlaying} _isPlaying=$_isPlaying");
-    if (widget.isPlaying && !_isPlaying) {
-      setState(() {
-        _isPlaying = true;
-      });
-      _playAnimation();
-    } else if (!widget.isPlaying && _isPlaying) {
-      _stopAnimation();
-    }
-
-    if (!_isPlaying) {
-      _displayAnimation(widget.isClickable);
-    }
-  }
-
-  @override
   void dispose() {
     _controller.dispose();
     super.dispose();
@@ -129,13 +125,22 @@ class _RecorderPlaybackWidgetState extends State&lt;_RecorderPlaybackWidget&gt;
       onTap: widget.isClickable ? widget.onTap : null,
       child: Opacity(
         opacity: widget.isClickable ? 1.0 : 0.5, // 设置透明度
-        child: Lottie(
-          composition: _composition,
-          controller: _controller,
-          renderCache: RenderCache.raster,
-          width: widget.width,
-          height: widget.height,
-        ),
+        child: FutureBuilder<LottieComposition>(
+            future: _futureComposition,
+            builder: (context, snapshot) {
+              if (snapshot.hasData) {
+                final composition = snapshot.data!;
+                return Lottie(
+                  composition: composition,
+                  controller: _controller,
+                  renderCache: RenderCache.raster,
+                  width: widget.width,
+                  height: widget.height,
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            }),
       ),
     );
   }
@@ -95,10 +95,12 @@ class _RecorderWidgetState extends State&lt;RecorderWidget&gt;
   }
   void _resetAnimation() {
-    setState(() {
-      _isPlaying = false;
-      _controller.value = 0;
-    });
+    if (mounted) {
+      setState(() {
+        _isPlaying = false;
+        _controller.value = 0;
+      });
+    }
   }
   @override
@@ -73,9 +73,11 @@ class _SpeakerWidgetState extends State&lt;SpeakerWidget&gt;
     Log.d(
         "$TAG _startAnimation widget=${widget.isPlaying} _isPlaying=$_isPlaying _controller.isAnimating=${_controller.isAnimating}");
     _timer = Timer.periodic(const Duration(milliseconds: 300), (Timer timer) {
-      setState(() {
-        _currentFrame = ((_currentFrame + 1) % 3);
-      });
+      if (mounted) {
+        setState(() {
+          _currentFrame = ((_currentFrame + 1) % 3);
+        });
+      }
     });
   }
@@ -86,11 +88,12 @@ class _SpeakerWidgetState extends State&lt;SpeakerWidget&gt;
     _controller.stop();
     _controller.reset();
-    setState(() {
-      _isPlaying = false;
-      // _controller.value = 0;
-      _currentFrame = 0;
-    });
+    if (mounted) {
+      setState(() {
+        _isPlaying = false;
+        _currentFrame = 0;
+      });
+    }
   }
   @override
@@ -55,7 +55,7 @@ class _StarRewardWidgetState extends State&lt;StarRewardWidget&gt;
     _futureComposition = _loadLottieComposition();
     if (widget.isPlaying) {
-        _startAnimation();
+      _startAnimation();
     }
   }
@@ -69,10 +69,12 @@ class _StarRewardWidgetState extends State&lt;StarRewardWidget&gt;
       Log.d("$TAG _futureComposition.then duration=${composition.duration}");
       _controller.duration = composition.duration;
       _controller.forward().whenCompleteOrCancel(() {
-        setState(() {
-          _isVisible = false;
-        });
-        widget.onAnimationEnd(); // 调用外部回调函数
+        if (mounted) {
+          setState(() {
+            _isVisible = false;
+          });
+          widget.onAnimationEnd(); // 调用外部回调函数
+        }
       });
     });
   }