From 07b173c9516b4255c731c5c0b50a786dc51caad6 Mon Sep 17 00:00:00 2001 From: wuqifeng <540416539@qq.com> Date: Sat, 27 Jul 2024 17:29:21 +0800 Subject: [PATCH] feat:练习页上方进度信息改成进度条呈现 --- lib/pages/practice/bloc/topic_picture_bloc.dart | 5 ++++- lib/pages/practice/topic_picture_page.dart | 13 +++++++------ lib/pages/practice/widgets/practice_header_widget.dart | 41 ++++++++++++++++++++++++++--------------- lib/pages/section/section_page.dart | 9 ++++++--- lib/route/route.dart | 5 ++++- pubspec.yaml | 2 ++ 6 files changed, 49 insertions(+), 26 deletions(-) diff --git a/lib/pages/practice/bloc/topic_picture_bloc.dart b/lib/pages/practice/bloc/topic_picture_bloc.dart index 4784a9e..113d87b 100644 --- a/lib/pages/practice/bloc/topic_picture_bloc.dart +++ b/lib/pages/practice/bloc/topic_picture_bloc.dart @@ -80,7 +80,10 @@ class TopicPictureBloc final BuildContext context; - TopicPictureBloc(this.context, this.pageController, this.courseLessonId) + final Color? moduleColor; + + TopicPictureBloc( + this.context, this.pageController, this.courseLessonId, this.moduleColor) : super(TopicPictureInitial()) { on(_pageControllerChange); on(_voicePlayStateChange); diff --git a/lib/pages/practice/topic_picture_page.dart b/lib/pages/practice/topic_picture_page.dart index 274e5a0..af63342 100644 --- a/lib/pages/practice/topic_picture_page.dart +++ b/lib/pages/practice/topic_picture_page.dart @@ -15,18 +15,17 @@ import 'bloc/topic_picture_bloc.dart'; import 'widgets/practice_header_widget.dart'; class TopicPicturePage extends StatelessWidget { - const TopicPicturePage({super.key, this.courseLessonId}); + const TopicPicturePage({super.key, this.courseLessonId, this.moduleColor}); final String? courseLessonId; + final Color? moduleColor; + @override Widget build(BuildContext context) { return BlocProvider( create: (context) => TopicPictureBloc( - context, - PageController(), - courseLessonId ?? '', - ) + context, PageController(), courseLessonId ?? '', moduleColor) ..add(InitBlocEvent()) ..add(RequestDataEvent()) ..add(XSVoiceInitEvent({ @@ -70,7 +69,9 @@ class _TopicPicturePage extends StatelessWidget { Column( children: [ PracticeHeaderWidget( - title: '${bloc.currentPage}/${bloc.entity?.topics?.length}', + color: bloc.moduleColor, + progress: bloc.currentPage, + total: bloc.entity?.topics?.length ?? 0, onTap: () { popPage(data: { 'currentStep': bloc.currentPage, diff --git a/lib/pages/practice/widgets/practice_header_widget.dart b/lib/pages/practice/widgets/practice_header_widget.dart index 635d0a0..bad0181 100644 --- a/lib/pages/practice/widgets/practice_header_widget.dart +++ b/lib/pages/practice/widgets/practice_header_widget.dart @@ -1,13 +1,26 @@ import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:percent_indicator/linear_percent_indicator.dart'; import 'package:wow_english/common/extension/string_extension.dart'; class PracticeHeaderWidget extends StatelessWidget { - const PracticeHeaderWidget({super.key, required this.onTap, this.title = ''}); + const PracticeHeaderWidget( + {super.key, + required this.onTap, + this.color, + required this.total, + this.progress = 0}); final Function() onTap; - final String title; + ///进度条颜色（阶段颜色） + final Color? color; + + ///进度条总长度 + final int total; + + ///进度条当前长度 + final int progress; @override Widget build(BuildContext context) { @@ -26,21 +39,19 @@ class PracticeHeaderWidget extends StatelessWidget { ), centerTitle: true, title: Container( - height: 20.h, - width: 100.w, // 容器宽度 + height: 10.h, + width: 150.w, // 容器宽度 // padding: EdgeInsets.symmetric(horizontal: 27.w, vertical: 10.h), alignment: Alignment.center, - decoration: BoxDecoration( - color: const Color(0xFF00B6F1), - borderRadius: BorderRadius.circular(20.r), - border: Border.all( - width: 1.0, - color: const Color(0xFF333333), - ), - ), - child: Text( - title, - style: TextStyle(fontSize: 15.sp, color: Colors.white), + child: LinearPercentIndicator( + animation: true, + lineHeight: 10.h, + animationDuration: 250, + animateFromLastPercent: true, + percent: total > 0 ? progress / total : 0, + // center: Text('$progress/$total}'), + barRadius: const Radius.circular(5), + progressColor: color, ), ), )); diff --git a/lib/pages/section/section_page.dart b/lib/pages/section/section_page.dart index b483a5f..096dac0 100644 --- a/lib/pages/section/section_page.dart +++ b/lib/pages/section/section_page.dart @@ -136,9 +136,12 @@ class _SectionPageView extends StatelessWidget { clickController.playMusicAndPerformAction( context, AudioPlayerUtilType.quizTime, () async { await bloc.requestEnterClass(courseLessonId, () { - pushNamed(AppRouteName.topicPic, - arguments: {'courseLessonId': courseLessonId}) - .then((value) { + pushNamed(AppRouteName.topicPic, arguments: { + 'courseLessonId': courseLessonId, + 'moduleColor': CourseModuleModel( + bloc.courseUnitEntity.courseModuleCode ?? 'Phase-1') + .color + }).then((value) { if (value != null) { Map dataMap = value as Map; diff --git a/lib/route/route.dart b/lib/route/route.dart index cc1254b..9f66df3 100644 --- a/lib/route/route.dart +++ b/lib/route/route.dart @@ -183,12 +183,15 @@ class AppRouter { });*/ case AppRouteName.topicPic: var courseLessonId = ''; + Color? moduleColor; if (settings.arguments != null) { courseLessonId = (settings.arguments as Map)['courseLessonId'] as String; + moduleColor = (settings.arguments as Map)['moduleColor'] as Color?; } return CupertinoPageRoute( - builder: (_) => TopicPicturePage(courseLessonId: courseLessonId)); + builder: (_) => TopicPicturePage( + courseLessonId: courseLessonId, moduleColor: moduleColor)); case AppRouteName.lookVideo: final videoUrl = (settings.arguments as Map)['videoUrl'] as String?; final title = (settings.arguments as Map)['title'] as String?; diff --git a/pubspec.yaml b/pubspec.yaml index 777a4f6..4f1b9bf 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -116,6 +116,8 @@ dependencies: umeng_apm_sdk: ^2.2.1 # 嵌套滚动 https://pub.dev/packages/nested_scroll_views nested_scroll_views: ^0.0.10 + # 进度条组件 https://pub.dev/packages/percent_indicator 主要看重其支持的进度动画效果 + percent_indicator: ^4.2.3 dev_dependencies: build_runner: ^2.4.4 -- libgit2 0.22.2