From 2512b58cfb93b0db16705ff0f2cc99cb6e84b76e Mon Sep 17 00:00:00 2001 From: wuqifeng <540416539@qq.com> Date: Fri, 2 Aug 2024 21:00:02 +0800 Subject: [PATCH] feat:性能优化-练习页PageView根据是否是当前页来决定build以及SpeakerWidget组件isPlaying --- lib/pages/practice/topic_picture_page.dart | 306 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------- 1 file changed, 161 insertions(+), 145 deletions(-) diff --git a/lib/pages/practice/topic_picture_page.dart b/lib/pages/practice/topic_picture_page.dart index a857627..c3eca11 100644 --- a/lib/pages/practice/topic_picture_page.dart +++ b/lib/pages/practice/topic_picture_page.dart @@ -93,28 +93,36 @@ class _TopicPicturePage extends StatelessWidget { bloc.add(CurrentPageIndexChangeEvent(index)); }, itemBuilder: (BuildContext context, int index) { + final bloc = + BlocProvider.of(context); CourseProcessTopics? topics = bloc.entity?.topics![index]; + bool isCurrentPage = + index == bloc.currentPage - 1; if (topics?.type == TopicType.audioImageSelect.value) { //听音选图 return _pageViewVoicePictureItemWidget( - topics); + topics, isCurrentPage); } else if (topics?.type == TopicType.audioCharSelect.value) { //听音选字 - return _pageViewVoiceWordItemWidget(topics); + return _pageViewVoiceWordItemWidget( + topics, isCurrentPage); } else if (topics?.type == TopicType.questionCharSelect.value) { //看题选字 - return _pageViewWordItemWidget(topics); + return _pageViewWordItemWidget( + topics, isCurrentPage); } else if (topics?.type == TopicType.questionImageSelect.value) { //看题选图 - return _pageViewItemWidget(topics); + return _pageViewItemWidget( + topics, isCurrentPage); } else { //语音问答 - return _voiceAnswerItem(topics); + return _voiceAnswerItem( + topics, isCurrentPage); } }), ) @@ -130,33 +138,34 @@ class _TopicPicturePage extends StatelessWidget { }); ///看题选图 - Widget _pageViewItemWidget(CourseProcessTopics? topics) => + Widget _pageViewItemWidget(CourseProcessTopics? topics, bool isCurrentPage) => BlocBuilder( + buildWhen: (_, s) => isCurrentPage, builder: (context, state) { - return SafeArea( - child: Column( - children: [ - Text(topics?.word ?? '', - softWrap: true, - style: TextStyle( - fontSize: 21.sp, color: const Color(0xFF333333))), - 26.verticalSpace, - SizedBox( - height: 143.h, - width: 143.w * (topics?.topicAnswerList?.length ?? 0), - child: ListView.builder( - scrollDirection: Axis.horizontal, - physics: const NeverScrollableScrollPhysics(), - itemCount: topics?.topicAnswerList?.length ?? 0, - itemBuilder: (context, index) { - return _decodeImageWidget( - index, topics?.topicAnswerList?[index]); - }), + return SafeArea( + child: Column( + children: [ + Text(topics?.word ?? '', + softWrap: true, + style: TextStyle( + fontSize: 21.sp, color: const Color(0xFF333333))), + 26.verticalSpace, + SizedBox( + height: 143.h, + width: 143.w * (topics?.topicAnswerList?.length ?? 0), + child: ListView.builder( + scrollDirection: Axis.horizontal, + physics: const NeverScrollableScrollPhysics(), + itemCount: topics?.topicAnswerList?.length ?? 0, + itemBuilder: (context, index) { + return _decodeImageWidget( + index, topics?.topicAnswerList?[index]); + }), + ), + ], ), - ], - ), - ); - }); + ); + }); Widget _decodeImageWidget( int index, CourseProcessTopicsTopicAnswerList? answerLis) => @@ -198,33 +207,35 @@ class _TopicPicturePage extends StatelessWidget { }); ///看题选字 - Widget _pageViewWordItemWidget(CourseProcessTopics? topics) => + Widget _pageViewWordItemWidget( + CourseProcessTopics? topics, bool isCurrentPage) => BlocBuilder( + buildWhen: (_, s) => isCurrentPage, builder: (context, state) { - return SafeArea( - child: Column( - children: [ - Text(topics?.word ?? '', - softWrap: true, - style: TextStyle( - fontSize: 21.sp, color: const Color(0xFF333333))), - 26.verticalSpace, - SizedBox( - height: 143.h, - width: 143.w * (topics?.topicAnswerList?.length ?? 0), - child: ListView.builder( - scrollDirection: Axis.horizontal, - itemCount: topics?.topicAnswerList?.length ?? 0, - physics: const NeverScrollableScrollPhysics(), - itemBuilder: (context, index) { - return _decodeWordWidget( - index, topics?.topicAnswerList?[index]); - }), + return SafeArea( + child: Column( + children: [ + Text(topics?.word ?? '', + softWrap: true, + style: TextStyle( + fontSize: 21.sp, color: const Color(0xFF333333))), + 26.verticalSpace, + SizedBox( + height: 143.h, + width: 143.w * (topics?.topicAnswerList?.length ?? 0), + child: ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: topics?.topicAnswerList?.length ?? 0, + physics: const NeverScrollableScrollPhysics(), + itemBuilder: (context, index) { + return _decodeWordWidget( + index, topics?.topicAnswerList?[index]); + }), + ), + ], ), - ], - ), - ); - }); + ); + }); Widget _decodeWordWidget( int index, CourseProcessTopicsTopicAnswerList? answerLis) => @@ -285,9 +296,12 @@ class _TopicPicturePage extends StatelessWidget { }); ///听音选图 - Widget _pageViewVoicePictureItemWidget(CourseProcessTopics? topics) => + Widget _pageViewVoicePictureItemWidget( + CourseProcessTopics? topics, bool isCurrentPage) => BlocBuilder( - builder: (context, state) { + buildWhen: (previous, current) { + return isCurrentPage; + }, builder: (context, state) { final bloc = BlocProvider.of(context); return SafeArea( child: Column( @@ -296,10 +310,9 @@ class _TopicPicturePage extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, children: [ SpeakerWidget( - isPlaying: bloc.voicePlayState == VoicePlayState.playing, + isPlaying: isCurrentPage && + bloc.voicePlayState == VoicePlayState.playing, // 控制动画播放 - isClickable: true, - // 控制是否可点击 width: 32.w, height: 32.w, onTap: () { @@ -368,41 +381,41 @@ class _TopicPicturePage extends StatelessWidget { }); ///听音选字 - Widget _pageViewVoiceWordItemWidget(CourseProcessTopics? topics) => + Widget _pageViewVoiceWordItemWidget( + CourseProcessTopics? topics, bool isCurrentPage) => BlocBuilder( + buildWhen: (_, s) => isCurrentPage, builder: (context, state) { - final bloc = BlocProvider.of(context); - return SafeArea( - child: Column( - children: [ - SpeakerWidget( - isPlaying: bloc.voicePlayState == VoicePlayState.playing, - // 控制动画播放 - isClickable: true, - // 控制是否可点击 - width: 32.w, - height: 32.w, - onTap: () { - bloc.add(VoicePlayEvent()); - }, - ), - 26.verticalSpace, - SizedBox( - width: 163.w * (topics?.topicAnswerList?.length ?? 0), - height: 143.h, - child: ListView.builder( - scrollDirection: Axis.horizontal, - itemCount: topics?.topicAnswerList?.length, - physics: const NeverScrollableScrollPhysics(), - itemBuilder: (BuildContext context, int index) { - return _decodeVoiceWordImageWidget( - index, topics!.topicAnswerList![index]); - }), + final bloc = BlocProvider.of(context); + return SafeArea( + child: Column( + children: [ + SpeakerWidget( + isPlaying: isCurrentPage && + bloc.voicePlayState == VoicePlayState.playing, + width: 32.w, + height: 32.w, + onTap: () { + bloc.add(VoicePlayEvent()); + }, + ), + 26.verticalSpace, + SizedBox( + width: 163.w * (topics?.topicAnswerList?.length ?? 0), + height: 143.h, + child: ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: topics?.topicAnswerList?.length, + physics: const NeverScrollableScrollPhysics(), + itemBuilder: (BuildContext context, int index) { + return _decodeVoiceWordImageWidget( + index, topics!.topicAnswerList![index]); + }), + ), + ], ), - ], - ), - ); - }); + ); + }); Widget _decodeVoiceWordImageWidget( int index, CourseProcessTopicsTopicAnswerList answerList) => @@ -465,71 +478,74 @@ class _TopicPicturePage extends StatelessWidget { }); ///语音问答 - Widget _voiceAnswerItem(CourseProcessTopics? topics) => + Widget _voiceAnswerItem(CourseProcessTopics? topics, bool isCurrentPage) => BlocBuilder( + buildWhen: (_, s) => isCurrentPage, builder: (context, state) { - final bloc = BlocProvider.of(context); - return Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - ClipRRect( - borderRadius: BorderRadius.circular(20), - child: Container( - color: Colors.white, - child: OwImageWidget( - name: topics?.picUrl ?? '', - height: 186.h, - width: 186.w, - ), - ), - ), - 120.horizontalSpace, - Column( + final bloc = BlocProvider.of(context); + return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - Row( + ClipRRect( + borderRadius: BorderRadius.circular(20), + child: Container( + color: Colors.white, + child: OwImageWidget( + name: topics?.picUrl ?? '', + height: 186.h, + width: 186.w, + ), + ), + ), + 120.horizontalSpace, + Column( + mainAxisAlignment: MainAxisAlignment.center, children: [ - SpeakerWidget( - isPlaying: bloc.voicePlayState == VoicePlayState.playing, - // 控制动画播放 - isClickable: !bloc.isRecording, - // 控制是否可点击 - width: 45.w, - height: 45.w, + Row( + children: [ + SpeakerWidget( + isPlaying: isCurrentPage && + bloc.voicePlayState == VoicePlayState.playing, + // 控制动画播放 + isClickable: !bloc.isRecording, + // 控制是否可点击 + width: 45.w, + height: 45.w, + onTap: () { + bloc.add(VoicePlayEvent()); + }, + ), + 10.horizontalSpace, + Text(topics?.word ?? '') + ], + ), + 70.verticalSpace, + RecorderWidget( + isPlaying: bloc.isRecording, + isClickable: + bloc.voicePlayState != VoicePlayState.playing, + width: 72.w, + height: 72.w, onTap: () { - bloc.add(VoicePlayEvent()); + if (bloc.isRecording) { + bloc.add(XSVoiceStopEvent()); + return; + } + if (topics?.type == TopicType.voiceQuestion.value || + topics?.type == TopicType.voiceWord.value) { + bloc.add(XSVoiceStartEvent(topics?.keyWord ?? '', '0', + UserUtil.getUser()!.id.toString())); + } else { + bloc.add(XSVoiceStartEvent(topics?.word ?? '', '0', + UserUtil.getUser()!.id.toString())); + } }, ), - 10.horizontalSpace, - Text(topics?.word ?? '') ], - ), - 70.verticalSpace, - RecorderWidget( - isPlaying: bloc.isRecording, - isClickable: bloc.voicePlayState != VoicePlayState.playing, - width: 72.w, - height: 72.w, - onTap: () { - if (bloc.isRecording) { - bloc.add(XSVoiceStopEvent()); - return; - } - if (topics?.type == TopicType.voiceQuestion.value || - topics?.type == TopicType.voiceWord.value) { - bloc.add(XSVoiceStartEvent(topics?.keyWord ?? '', '0', - UserUtil.getUser()!.id.toString())); - } else { - bloc.add(XSVoiceStartEvent(topics?.word ?? '', '0', - UserUtil.getUser()!.id.toString())); - } - }, - ), + ) ], - ) - ], - ); - }); + ); + }); Color getResultColor(bool correct) { if (correct) { -- libgit2 0.22.2