feat:绘本跟读页上方进度信息改成进度条呈现

吴启风
1 parent a0bbff8c
Showing 4 changed files with 44 additions and 37 deletions
lib/pages/reading/bloc/reading_bloc.dart
lib/pages/reading/reading_page.dart
lib/pages/section/section_page.dart
lib/route/route.dart
@@ -89,7 +89,9 @@ class ReadingPageBloc
   final BuildContext context;
-  ReadingPageBloc(this.context, this.pageController, this.courseLessonId)
+  final Color? moduleColor;
+
+  ReadingPageBloc(this.context, this.pageController, this.courseLessonId, this.moduleColor)
       : super(ReadingPageInitial()) {
     on<CurrentPageIndexChangeEvent>(_pageControllerChange);
     on<CurrentModeChangeEvent>(_playModeChange);
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.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';
 import 'package:wow_english/pages/reading/widgets/ReadingModeType.dart';
 import 'package:wow_english/pages/reading/widgets/reading_dialog_widget.dart';
@@ -8,7 +9,6 @@ import &#39;package:wow_english/route/route.dart&#39;;
 import '../../common/core/app_consts.dart';
 import '../../common/core/user_util.dart';
-import '../../common/widgets/record_playback_widget.dart';
 import '../../common/widgets/recorder_widget.dart';
 import '../../common/widgets/speaker_widget.dart';
 import '../../models/course_process_entity.dart';
@@ -17,23 +17,25 @@ import &#39;bloc/reading_bloc.dart&#39;;
 ///绘本页
 class ReadingPage extends StatelessWidget {
-  const ReadingPage({super.key, this.courseLessonId});
+  const ReadingPage({super.key, this.courseLessonId, this.moduleColor});
   final String? courseLessonId;
+  final Color? moduleColor;
+
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (_) =>
-          ReadingPageBloc(context, PageController(), courseLessonId ?? '')
-            ..add(InitBlocEvent())
-            ..add(RequestDataEvent())
-            ..add(XSVoiceInitEvent({
-              'appKey': AppConsts.xsAppKey,
-              'service': AppConsts.xsAppService,
-              'secretKey': AppConsts.xsAppSecretKey,
-              'userId': UserUtil.getUser()!.id.toString(),
-            })),
+      create: (_) => ReadingPageBloc(
+          context, PageController(), courseLessonId ?? '', moduleColor)
+        ..add(InitBlocEvent())
+        ..add(RequestDataEvent())
+        ..add(XSVoiceInitEvent({
+          'appKey': AppConsts.xsAppKey,
+          'service': AppConsts.xsAppService,
+          'secretKey': AppConsts.xsAppSecretKey,
+          'userId': UserUtil.getUser()!.id.toString(),
+        })),
       child: _ReadingPage(),
     );
   }
@@ -102,20 +104,20 @@ class _ReadingPage extends StatelessWidget {
                           )),
                     ),
                     Container(
-                      height: 32.h,
-                      padding: EdgeInsets.symmetric(horizontal: 27.w),
-                      decoration: BoxDecoration(
-                        color: const Color(0xFF00B6F1),
-                        borderRadius: BorderRadius.circular(15.r),
-                        border: Border.all(
-                          width: 1.0,
-                          color: const Color(0xFF140C10),
-                        ),
-                      ),
+                      height: 10.h,
+                      width: 150.w,
                       alignment: Alignment.center,
-                      child: Text(
-                        '${bloc.currentPage}/${bloc.dataCount()}',
-                        style: TextStyle(fontSize: 20.sp, color: Colors.white),
+                      child: LinearPercentIndicator(
+                        animation: true,
+                        lineHeight: 10.h,
+                        animationDuration: 250,
+                        animateFromLastPercent: true,
+                        percent: bloc.dataCount() > 0
+                            ? bloc.currentPage / bloc.dataCount()
+                            : 0,
+                        // center: Text('$progress/$total}'),
+                        barRadius: const Radius.circular(5),
+                        progressColor: bloc.moduleColor,
                       ),
                     ),
@@ -175,14 +177,14 @@ class _ReadingPage extends StatelessWidget {
                         width: 10.w,
                       ),
                       Expanded(
-                          child: RichText(
-                            text: TextSpan(
-                              style: DefaultTextStyle.of(context).style,
-                              children: bloc.displayContent(),
-                            ),
-                            maxLines: 2,
-                            overflow: TextOverflow.ellipsis,
+                        child: RichText(
+                          text: TextSpan(
+                            style: DefaultTextStyle.of(context).style,
+                            children: bloc.displayContent(),
                           ),
+                          maxLines: 2,
+                          overflow: TextOverflow.ellipsis,
+                        ),
                       ),
                       SizedBox(
                         width: 10.w,
@@ -111,9 +111,10 @@ class _SectionPageView extends StatelessWidget {
             await clickController.playMusicAndPerformAction(
                 context, AudioPlayerUtilType.readingTime, () async {
               await bloc.requestEnterClass(courseLessonId, () {
-                pushNamed(AppRouteName.reading,
-                        arguments: {'courseLessonId': courseLessonId})
-                    .then((value) {
+                pushNamed(AppRouteName.reading, arguments: {
+                  'courseLessonId': courseLessonId,
+                  'moduleColor': ModuleCache.instance.getCurrentThemeColor()
+                }).then((value) {
                   if (value != null) {
                     Map<String, dynamic> dataMap =
                         value as Map<String, dynamic>;
@@ -247,12 +247,14 @@ class AppRouter {
             transitionsBuilder: (_, __, ___, child) => child);
       case AppRouteName.reading:
         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: (_) => ReadingPage(courseLessonId: courseLessonId));
+            builder: (_) => ReadingPage(courseLessonId: courseLessonId, moduleColor: moduleColor));
       default:
         return CupertinoPageRoute(
             builder: (_) => Scaffold(