feat:练习页上方进度信息改成进度条呈现

吴启风
1 parent 37063ced
Showing 6 changed files with 49 additions and 26 deletions
lib/pages/practice/bloc/topic_picture_bloc.dart
lib/pages/practice/topic_picture_page.dart
lib/pages/practice/widgets/practice_header_widget.dart
lib/pages/section/section_page.dart
lib/route/route.dart
pubspec.yaml
@@ -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<CurrentPageIndexChangeEvent>(_pageControllerChange);
     on<VoicePlayStateChangeEvent>(_voicePlayStateChange);
@@ -15,18 +15,17 @@ import &#39;bloc/topic_picture_bloc.dart&#39;;
 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,
 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,
             ),
           ),
         ));
@@ -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<String, dynamic> dataMap =
                         value as Map<String, dynamic>;
@@ -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?;
@@ -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