Commit 951eb853271dcf1ccf7aab05a9f790956246c46a
1 parent
13de08d7
feat:代码优化-星星等动效对话框不受返回关闭,能保证稳定关闭
Showing
5 changed files
with
115 additions
and
83 deletions
lib/common/utils/show_star_reward_dialog.dart
| 1 | import 'package:flutter/material.dart'; | 1 | import 'package:flutter/material.dart'; |
| 2 | 2 | ||
| 3 | +import '../../utils/log_util.dart'; | ||
| 3 | import '../widgets/cheer_reward_widget.dart'; | 4 | import '../widgets/cheer_reward_widget.dart'; |
| 4 | import '../widgets/star_reward_widget.dart'; | 5 | import '../widgets/star_reward_widget.dart'; |
| 5 | 6 | ||
| 6 | -void showStarRewardDialog(BuildContext context, { | 7 | +Future<void> showStarRewardDialog( |
| 8 | + BuildContext context, { | ||
| 7 | double width = 357.5, | 9 | double width = 357.5, |
| 8 | double height = 165, | 10 | double height = 165, |
| 9 | int starCount = 3, | 11 | int starCount = 3, |
| 10 | -}) { | ||
| 11 | - showDialog( | 12 | + VoidCallback? onDismiss, |
| 13 | +}) async { | ||
| 14 | + ///showDialog 方法的返回值将是 Navigator.of(context).pop 传递给对话框的参数 | ||
| 15 | + await showDialog( | ||
| 12 | context: context, | 16 | context: context, |
| 13 | - barrierDismissible: false, // 点击对话框外部不关闭对话框 | 17 | + barrierDismissible: false, |
| 14 | builder: (BuildContext context) { | 18 | builder: (BuildContext context) { |
| 15 | - return Dialog( | ||
| 16 | - backgroundColor: Colors.transparent, // 设置对话框背景为透明 | ||
| 17 | - insetPadding: const EdgeInsets.all(0), // 去除对话框的内边距 | ||
| 18 | - child: StarRewardWidget( | ||
| 19 | - width: width, | ||
| 20 | - height: height, | ||
| 21 | - isPlaying: true, | ||
| 22 | - starCount: starCount, | ||
| 23 | - onAnimationEnd: () { | ||
| 24 | - Navigator.of(context).pop(); // 关闭对话框 | ||
| 25 | - }, | 19 | + return PopScope( |
| 20 | + canPop: false, | ||
| 21 | + onPopInvoked: (didPop) { | ||
| 22 | + Log.d('WQF showStarRewardDialog onPopInvoked didPop=$didPop'); | ||
| 23 | + }, | ||
| 24 | + child: Dialog( | ||
| 25 | + backgroundColor: Colors.transparent, // 设置对话框背景为透明 | ||
| 26 | + insetPadding: const EdgeInsets.all(0), // 去除对话框的内边距 | ||
| 27 | + child: StarRewardWidget( | ||
| 28 | + width: width, | ||
| 29 | + height: height, | ||
| 30 | + isPlaying: true, | ||
| 31 | + starCount: starCount, | ||
| 32 | + onAnimationEnd: () { | ||
| 33 | + Navigator.of(context).pop(); // 关闭对话框 | ||
| 34 | + }, | ||
| 35 | + ), | ||
| 26 | ), | 36 | ), |
| 27 | ); | 37 | ); |
| 28 | }, | 38 | }, |
| 29 | ); | 39 | ); |
| 40 | + onDismiss?.call(); | ||
| 30 | } | 41 | } |
| 31 | 42 | ||
| 32 | -void showCheerRewardDialog(BuildContext context, { | 43 | +Future<void> showCheerRewardDialog( |
| 44 | + BuildContext context, { | ||
| 33 | required String lottieFile, | 45 | required String lottieFile, |
| 34 | double width = 357.5, | 46 | double width = 357.5, |
| 35 | double height = 165, | 47 | double height = 165, |
| 36 | -}) { | ||
| 37 | - showDialog( | 48 | + VoidCallback? onDismiss, |
| 49 | +}) async { | ||
| 50 | + await showDialog( | ||
| 38 | context: context, | 51 | context: context, |
| 39 | barrierDismissible: false, // 点击对话框外部不关闭对话框 | 52 | barrierDismissible: false, // 点击对话框外部不关闭对话框 |
| 40 | builder: (BuildContext context) { | 53 | builder: (BuildContext context) { |
| 41 | - return Dialog( | ||
| 42 | - backgroundColor: Colors.transparent, // 设置对话框背景为透明 | ||
| 43 | - insetPadding: const EdgeInsets.all(0), // 去除对话框的内边距 | ||
| 44 | - child: CheerRewardWidget( | ||
| 45 | - lottieFile: lottieFile, | ||
| 46 | - width: width, | ||
| 47 | - height: height, | ||
| 48 | - isPlaying: true, | ||
| 49 | - onAnimationEnd: () { | ||
| 50 | - Navigator.of(context).pop(); // 关闭对话框 | ||
| 51 | - }, | 54 | + return PopScope( |
| 55 | + canPop: false, | ||
| 56 | + onPopInvoked: (didPop) { | ||
| 57 | + Log.d('WQF showCheerRewardDialog onPopInvoked didPop=$didPop'); | ||
| 58 | + }, | ||
| 59 | + child: Dialog( | ||
| 60 | + backgroundColor: Colors.transparent, // 设置对话框背景为透明 | ||
| 61 | + insetPadding: const EdgeInsets.all(0), // 去除对话框的内边距 | ||
| 62 | + child: CheerRewardWidget( | ||
| 63 | + lottieFile: lottieFile, | ||
| 64 | + width: width, | ||
| 65 | + height: height, | ||
| 66 | + isPlaying: true, | ||
| 67 | + onAnimationEnd: () { | ||
| 68 | + Navigator.of(context).pop(); // 关闭对话框 | ||
| 69 | + }, | ||
| 70 | + ), | ||
| 52 | ), | 71 | ), |
| 53 | ); | 72 | ); |
| 54 | }, | 73 | }, |
| 55 | ); | 74 | ); |
| 56 | -} | ||
| 57 | \ No newline at end of file | 75 | \ No newline at end of file |
| 76 | + onDismiss?.call(); | ||
| 77 | +} |
lib/common/widgets/cheer_reward_widget.dart
| @@ -53,6 +53,10 @@ class _CheerRewardWidgetState extends State<CheerRewardWidget> | @@ -53,6 +53,10 @@ class _CheerRewardWidgetState extends State<CheerRewardWidget> | ||
| 53 | } | 53 | } |
| 54 | } | 54 | } |
| 55 | 55 | ||
| 56 | + Future<LottieComposition> _loadLottieComposition() async { | ||
| 57 | + return AssetLottie(widget.lottieFile).load(); | ||
| 58 | + } | ||
| 59 | + | ||
| 56 | void _startAnimation() { | 60 | void _startAnimation() { |
| 57 | Log.d("$TAG ${identityHashCode(this)} _startAnimation"); | 61 | Log.d("$TAG ${identityHashCode(this)} _startAnimation"); |
| 58 | setState(() { | 62 | setState(() { |
| @@ -67,16 +71,12 @@ class _CheerRewardWidgetState extends State<CheerRewardWidget> | @@ -67,16 +71,12 @@ class _CheerRewardWidgetState extends State<CheerRewardWidget> | ||
| 67 | setState(() { | 71 | setState(() { |
| 68 | _isVisible = false; | 72 | _isVisible = false; |
| 69 | }); | 73 | }); |
| 70 | - widget.onAnimationEnd(); // 调用外部回调函数 | ||
| 71 | } | 74 | } |
| 75 | + widget.onAnimationEnd(); // 调用外部回调函数 | ||
| 72 | }); | 76 | }); |
| 73 | }); | 77 | }); |
| 74 | } | 78 | } |
| 75 | 79 | ||
| 76 | - Future<LottieComposition> _loadLottieComposition() async { | ||
| 77 | - return AssetLottie(widget.lottieFile).load(); | ||
| 78 | - } | ||
| 79 | - | ||
| 80 | @override | 80 | @override |
| 81 | void dispose() { | 81 | void dispose() { |
| 82 | _controller.dispose(); | 82 | _controller.dispose(); |
lib/common/widgets/star_reward_widget.dart
| @@ -73,8 +73,9 @@ class _StarRewardWidgetState extends State<StarRewardWidget> | @@ -73,8 +73,9 @@ class _StarRewardWidgetState extends State<StarRewardWidget> | ||
| 73 | setState(() { | 73 | setState(() { |
| 74 | _isVisible = false; | 74 | _isVisible = false; |
| 75 | }); | 75 | }); |
| 76 | - widget.onAnimationEnd(); // 调用外部回调函数 | ||
| 77 | } | 76 | } |
| 77 | + Log.d('$StarRewardWidget whenCompleteOrCancel'); | ||
| 78 | + widget.onAnimationEnd(); // 调用外部回调函数 | ||
| 78 | }); | 79 | }); |
| 79 | }); | 80 | }); |
| 80 | } | 81 | } |
lib/pages/practice/bloc/topic_picture_bloc.dart
| @@ -7,7 +7,6 @@ import 'package:flutter/services.dart'; | @@ -7,7 +7,6 @@ import 'package:flutter/services.dart'; | ||
| 7 | import 'package:flutter_bloc/flutter_bloc.dart'; | 7 | import 'package:flutter_bloc/flutter_bloc.dart'; |
| 8 | import 'package:flutter_easyloading/flutter_easyloading.dart'; | 8 | import 'package:flutter_easyloading/flutter_easyloading.dart'; |
| 9 | import 'package:permission_handler/permission_handler.dart'; | 9 | import 'package:permission_handler/permission_handler.dart'; |
| 10 | -import 'package:wow_english/common/extension/string_extension.dart'; | ||
| 11 | import 'package:wow_english/common/request/dao/listen_dao.dart'; | 10 | import 'package:wow_english/common/request/dao/listen_dao.dart'; |
| 12 | import 'package:wow_english/common/request/exception.dart'; | 11 | import 'package:wow_english/common/request/exception.dart'; |
| 13 | import 'package:wow_english/models/course_process_entity.dart'; | 12 | import 'package:wow_english/models/course_process_entity.dart'; |
| @@ -207,10 +206,14 @@ class TopicPictureBloc | @@ -207,10 +206,14 @@ class TopicPictureBloc | ||
| 207 | if (checkAnswerRight(_optionSelectItem) == true) { | 206 | if (checkAnswerRight(_optionSelectItem) == true) { |
| 208 | /// 如果选择题答(选)对后题目没播完,则暂停播放题目。答错的话继续播放体验也不错 | 207 | /// 如果选择题答(选)对后题目没播完,则暂停播放题目。答错的话继续播放体验也不错 |
| 209 | await closePlayerResource(); | 208 | await closePlayerResource(); |
| 210 | - showStarRewardDialog(context); | ||
| 211 | - await _playResultSound(true); | 209 | + |
| 210 | + /// right音频长度比动效短,所以等动效完了再翻页 | ||
| 211 | + AudioPlayerUtil.getInstance().playAudio(AudioPlayerUtilType.right); | ||
| 212 | + await showStarRewardDialog(context, onDismiss: () { | ||
| 213 | + autoFlipPage(); | ||
| 214 | + }); | ||
| 212 | } else { | 215 | } else { |
| 213 | - await _playResultSound(false); | 216 | + await AudioPlayerUtil.getInstance().playAudio(AudioPlayerUtilType.wrong); |
| 214 | } | 217 | } |
| 215 | } | 218 | } |
| 216 | 219 | ||
| @@ -276,14 +279,18 @@ class TopicPictureBloc | @@ -276,14 +279,18 @@ class TopicPictureBloc | ||
| 276 | int score = int.parse(overall); | 279 | int score = int.parse(overall); |
| 277 | final voiceResult = VoiceResultType.fromScore(score); | 280 | final voiceResult = VoiceResultType.fromScore(score); |
| 278 | if (voiceResult.lottieFilePath != null) { | 281 | if (voiceResult.lottieFilePath != null) { |
| 279 | - showCheerRewardDialog(context, lottieFile: voiceResult.lottieFilePath!); | 282 | + AudioPlayerUtil.getInstance().playAudio(voiceResult.audioType); |
| 283 | + await showCheerRewardDialog(context, lottieFile: voiceResult.lottieFilePath!, onDismiss: () { | ||
| 284 | + if (isLastPage()) { | ||
| 285 | + showStepPage(); | ||
| 286 | + } | ||
| 287 | + }); | ||
| 288 | + } else { | ||
| 289 | + await AudioPlayerUtil.getInstance().playAudio(voiceResult.audioType); | ||
| 290 | + if (isLastPage()) { | ||
| 291 | + showStepPage(); | ||
| 292 | + } | ||
| 280 | } | 293 | } |
| 281 | - await ClickWithMusicController.instance.playMusicAndPerformAction( | ||
| 282 | - context, | ||
| 283 | - voiceResult.audioType, | ||
| 284 | - () { | ||
| 285 | - if (isLastPage()) {showStepPage();}; | ||
| 286 | - }); | ||
| 287 | } | 294 | } |
| 288 | 295 | ||
| 289 | // 暂时没用上 | 296 | // 暂时没用上 |
| @@ -319,29 +326,24 @@ class TopicPictureBloc | @@ -319,29 +326,24 @@ class TopicPictureBloc | ||
| 319 | await ClickWithMusicController.instance.reset(); | 326 | await ClickWithMusicController.instance.reset(); |
| 320 | } | 327 | } |
| 321 | 328 | ||
| 322 | - ///播放选择结果音效 | ||
| 323 | - Future<void> _playResultSound(bool isCorrect) async { | ||
| 324 | - await ClickWithMusicController.instance.playMusicAndPerformAction(context, | ||
| 325 | - isCorrect ? AudioPlayerUtilType.right : AudioPlayerUtilType.wrong, () { | ||
| 326 | - if (isCorrect) { | ||
| 327 | - if (isLastPage()) { | ||
| 328 | - showStepPage(); | ||
| 329 | - } else { | ||
| 330 | - // 答对后且播放完自动翻页 | ||
| 331 | - pageController.nextPage( | ||
| 332 | - duration: const Duration(milliseconds: 250), | ||
| 333 | - curve: Curves.ease, | ||
| 334 | - ); | ||
| 335 | - } | ||
| 336 | - } | ||
| 337 | - }); | ||
| 338 | - } | ||
| 339 | - | ||
| 340 | ///是否是最后一页 | 329 | ///是否是最后一页 |
| 341 | bool isLastPage() { | 330 | bool isLastPage() { |
| 342 | return currentPage == _entity?.topics?.length; | 331 | return currentPage == _entity?.topics?.length; |
| 343 | } | 332 | } |
| 344 | 333 | ||
| 334 | + ///自动翻页 | ||
| 335 | + void autoFlipPage() { | ||
| 336 | + if (isLastPage()) { | ||
| 337 | + showStepPage(); | ||
| 338 | + } else { | ||
| 339 | + // 答对后且播放完自动翻页 | ||
| 340 | + pageController.nextPage( | ||
| 341 | + duration: const Duration(milliseconds: 250), | ||
| 342 | + curve: Curves.ease, | ||
| 343 | + ); | ||
| 344 | + } | ||
| 345 | + } | ||
| 346 | + | ||
| 345 | ///展示过渡页 | 347 | ///展示过渡页 |
| 346 | void showStepPage() { | 348 | void showStepPage() { |
| 347 | ///如果最后一页是语音问答题,评测完后自动翻页 | 349 | ///如果最后一页是语音问答题,评测完后自动翻页 |
lib/pages/reading/bloc/reading_bloc.dart
| @@ -22,6 +22,7 @@ import '../../../models/course_process_entity.dart'; | @@ -22,6 +22,7 @@ import '../../../models/course_process_entity.dart'; | ||
| 22 | import '../../../models/singsound_result_detail_entity.dart'; | 22 | import '../../../models/singsound_result_detail_entity.dart'; |
| 23 | import '../../../models/voice_result_type.dart'; | 23 | import '../../../models/voice_result_type.dart'; |
| 24 | import '../../../route/route.dart'; | 24 | import '../../../route/route.dart'; |
| 25 | +import '../../../utils/audio_player_util.dart'; | ||
| 25 | import '../../../utils/loading.dart'; | 26 | import '../../../utils/loading.dart'; |
| 26 | 27 | ||
| 27 | import '../../../utils/log_util.dart'; | 28 | import '../../../utils/log_util.dart'; |
| @@ -418,27 +419,35 @@ class ReadingPageBloc | @@ -418,27 +419,35 @@ class ReadingPageBloc | ||
| 418 | add(OnXSVoiceStateChangeEvent()); | 419 | add(OnXSVoiceStateChangeEvent()); |
| 419 | 420 | ||
| 420 | final voiceResult = VoiceResultType.fromScore(score); | 421 | final voiceResult = VoiceResultType.fromScore(score); |
| 422 | + | ||
| 421 | if (voiceResult.lottieFilePath != null) { | 423 | if (voiceResult.lottieFilePath != null) { |
| 422 | - showCheerRewardDialog(context, lottieFile: voiceResult.lottieFilePath!); | 424 | + AudioPlayerUtil.getInstance().playAudio(voiceResult.audioType); |
| 425 | + await showCheerRewardDialog(context, lottieFile: voiceResult.lottieFilePath!, onDismiss: () async { | ||
| 426 | + await actionAfterRecord(); | ||
| 427 | + }); | ||
| 428 | + } else { | ||
| 429 | + await AudioPlayerUtil.getInstance().playAudio(voiceResult.audioType); | ||
| 430 | + await actionAfterRecord(); | ||
| 423 | } | 431 | } |
| 424 | - await ClickWithMusicController.instance | ||
| 425 | - .playMusicAndPerformAction(context, voiceResult.audioType, () async { | ||
| 426 | - ///完成录音后紧接着播放录音 | ||
| 427 | - await _playRecordAudioInner(); | ||
| 428 | - if (isLastPage()) { | ||
| 429 | - sectionComplete(() { | ||
| 430 | - popPage(data: { | ||
| 431 | - 'currentStep': currentPage, | ||
| 432 | - 'courseLessonId': courseLessonId, | ||
| 433 | - 'isCompleted': true, | ||
| 434 | - 'nextSection': true | ||
| 435 | - }); | ||
| 436 | - }, againSectionTap: () { | ||
| 437 | - _resetLocalResult(); | ||
| 438 | - pageController.jumpToPage(0); | 432 | + } |
| 433 | + | ||
| 434 | + /// 作答音效&动效播放结束后 | ||
| 435 | + Future<void> actionAfterRecord() async { | ||
| 436 | + ///完成录音后紧接着播放录音 | ||
| 437 | + await _playRecordAudioInner(); | ||
| 438 | + if (isLastPage()) { | ||
| 439 | + sectionComplete(() { | ||
| 440 | + popPage(data: { | ||
| 441 | + 'currentStep': currentPage, | ||
| 442 | + 'courseLessonId': courseLessonId, | ||
| 443 | + 'isCompleted': true, | ||
| 444 | + 'nextSection': true | ||
| 439 | }); | 445 | }); |
| 440 | - } | ||
| 441 | - }); | 446 | + }, againSectionTap: () { |
| 447 | + _resetLocalResult(); | ||
| 448 | + pageController.jumpToPage(0); | ||
| 449 | + }); | ||
| 450 | + } | ||
| 442 | } | 451 | } |
| 443 | 452 | ||
| 444 | ///终止评测 | 453 | ///终止评测 |