feat:视频跟读逻辑

liangchengyou
1 parent d1d32220
Showing 11 changed files with 242 additions and 1 deletions
assets/images/gendubeij.png
assets/images/gendubeij_mengban.png
assets/images/star_dark.png
assets/images/star_light.png
lib/home/home_page.dart
lib/repeatafter/bloc/repeat_after_bloc.dart
lib/repeatafter/bloc/repeat_after_event.dart
lib/repeatafter/bloc/repeat_after_state.dart
lib/repeatafter/repeat_after_page.dart
lib/repeatafter/widgets/repeat_after_item.dart
lib/route/route.dart
@@ -25,7 +25,7 @@ class HomePage extends StatelessWidget {
 class _HomePageView extends StatelessWidget {
   void _headerActionEvent(HeaderActionType type) {
     if (type == HeaderActionType.video) {
-
+      Navigator.of(AppRouter.context).pushNamed(AppRouteName.reAfter);
     } else if (type == HeaderActionType.phase) {
       Navigator.of(AppRouter.context).pushNamed(AppRouteName.lesson);
     } else if (type == HeaderActionType.listen) {
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_easyloading/flutter_easyloading.dart';
+
+part 'repeat_after_event.dart';
+part 'repeat_after_state.dart';
+
+class RepeatAfterBloc extends Bloc<RepeatAfterEvent, RepeatAfterState> {
+  RepeatAfterBloc() : super(RepeatAfterInitial()) {
+    on<RepeatAfterEvent>((event, emit) {
+      // TODO: implement event handler
+    });
+  }
+
+
+  Future<void> requestData() async {
+    EasyLoading.show();
+    Future.delayed(const Duration(milliseconds: 2000),(){
+      EasyLoading.dismiss();
+      emit(RequestDataState());
+    });
+  }
+}
+part of 'repeat_after_bloc.dart';
+
+@immutable
+abstract class RepeatAfterEvent {}
+part of 'repeat_after_bloc.dart';
+
+@immutable
+abstract class RepeatAfterState {}
+
+class RepeatAfterInitial extends RepeatAfterState {}
+
+class RequestDataState extends RepeatAfterState {}
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_easyloading/flutter_easyloading.dart';
+import 'package:wow_english/common/widgets/we_app_bar.dart';
+import 'package:wow_english/repeatafter/widgets/repeat_after_item.dart';
+
+import 'bloc/repeat_after_bloc.dart';
+
+class RepeatAfterPage extends StatelessWidget {
+  const RepeatAfterPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => RepeatAfterBloc()..requestData(),
+      child: _RepeatAfterPageView(),
+    );
+  }
+}
+
+class _RepeatAfterPageView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<RepeatAfterBloc, RepeatAfterState>(
+      listener: (context, state) {
+        if (state is RequestDataState) {
+          EasyLoading.showToast('网络请求结束');
+        }
+      },
+      child: _repeatAfterView(),
+    );
+  }
+
+  Widget _repeatAfterView() => BlocBuilder<RepeatAfterBloc, RepeatAfterState>(
+    builder: (context, state) {
+      return Scaffold(
+        appBar: const WEAppBar(
+          titleText: '视频跟读',
+          centerTitle: false,
+        ),
+        body: SafeArea(
+          child: Container(
+            alignment: Alignment.center,
+            child: ListView.builder(
+                itemCount: 10,
+                scrollDirection: Axis.horizontal,
+                itemBuilder: (BuildContext context,int index){
+                  bool unLock = index%3==0;
+                  return RepeatAfterItem(
+                      unLock: unLock,
+                      tapEvent: () {
+
+                      },
+                      starNumber: !unLock?0:Random().nextInt(5)
+                  );
+                }),
+          ),
+        ),
+      );
+    },
+  );
+}
+
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
+
+class RepeatAfterItem extends StatelessWidget {
+  const RepeatAfterItem({super.key, required this.starNumber, required this.unLock, required this.tapEvent});
+  //分数
+  final int starNumber;
+  //是否解锁
+  final bool unLock;
+
+  final Function() tapEvent;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.symmetric(
+        horizontal: 10.w
+      ),
+      child: GestureDetector(
+        onTap: (){
+          if(unLock) {
+            tapEvent();
+          }
+        },
+        child: Stack(
+          children: [
+            _modelInfoWidget(context),
+            _lockWidget()
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _modelInfoWidget(BuildContext context) {
+    return Container(
+      width: 162.w,
+      height: 235.h,
+      decoration: BoxDecoration(
+          image: DecorationImage(
+              image: AssetImage(
+                  'gendubeij'.assetPng
+              ),
+              fit: BoxFit.fill
+          )
+      ),
+      padding: EdgeInsets.symmetric(horizontal: 11.w,vertical: 13.h),
+      alignment: Alignment.center,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Image.network(
+            'https://img.liblibai.com/web/648331d033b41.png?image_process=format,webp&x-oss-process=image/resize,w_2980,m_lfit/format,webp',
+            height: 100.h,
+            width: 140.w,
+            fit: BoxFit.fitWidth,
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Image.asset(
+                starNumber >= 1 ? 'star_light'.assetPng:'star_dark'.assetPng,
+                width: 23.w,
+                height: 21.h,
+              ),
+              Image.asset(
+                starNumber >= 2 ? 'star_light'.assetPng:'star_dark'.assetPng,
+                width: 23.w,
+                height: 21.h,
+              ),
+              Image.asset(
+                starNumber >= 3 ? 'star_light'.assetPng:'star_dark'.assetPng,
+                width: 23.w,
+                height: 21.h,
+              ),
+              Image.asset(
+                starNumber >= 4 ? 'star_light'.assetPng:'star_dark'.assetPng,
+                width: 23.w,
+                height: 21.h,
+              ),
+              Image.asset(
+                starNumber >= 5 ? 'star_light'.assetPng:'star_dark'.assetPng,
+                width: 23.w,
+                height: 21.h,
+              ),
+            ],
+          ),
+          Container(
+            height: 35.h,
+            width: double.infinity,
+            decoration: BoxDecoration(
+              color: const Color(0xFFFFCC00),
+              borderRadius: BorderRadius.circular(5.r),
+              border: Border.all(
+                width: 1.0,
+                color: const Color(0xFF333333),
+              ),
+            ),
+            alignment: Alignment.center,
+            child: Text(
+              'video title',
+              style: TextStyle(
+                  fontSize: 16.sp,
+                  color: const Color(0xFF333333)
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _lockWidget() {
+    return Offstage(
+      offstage: unLock,
+      child: Container(
+        width: 162.w,
+        height: 235.h,
+        decoration: BoxDecoration(
+            image: DecorationImage(
+                image: AssetImage(
+                    'gendubeij_mengban'.assetPng
+                ),
+                fit: BoxFit.fill
+            )
+        ),
+        alignment: Alignment.center,
+        child: Image.asset(
+          'listen_lock'.assetPng,
+          height: 36.h,
+          width: 41.w,
+        ),
+      ),
+    );
+  }
+}
 \ No newline at end of file
@@ -8,6 +8,7 @@ import &#39;package:wow_english/listen/listen_page.dart&#39;;
 import 'package:wow_english/login/forgetpwd/forget_password_home_page.dart';
 import 'package:wow_english/login/loginpage/login_page.dart';
 import 'package:wow_english/login/setpwd/set_pwd_page.dart';
+import 'package:wow_english/repeatafter/repeat_after_page.dart';
 import 'package:wow_english/shop/exchane/exchange_lesson_page.dart';
 import 'package:wow_english/shop/exchangelist/exchange_lesson_list_page.dart';
 import 'package:wow_english/shop/home/shop_home_page.dart';
@@ -26,6 +27,7 @@ class AppRouteName {
   static const String shop = 'shop';
   static const String exLesson = 'exLesson';
   static const String exList = 'exList';
+  static const String reAfter = 'reAfter';
   static const String tab = '/';
 }
@@ -58,6 +60,8 @@ class AppRouter {
         return CupertinoPageRoute(builder: (_) =>  const ExchangeLessonPage());
       case AppRouteName.exList:
         return CupertinoPageRoute(builder: (_) =>  const ExchangeLessonListPage());
+      case AppRouteName.reAfter:
+        return CupertinoPageRoute(builder: (_) =>  const RepeatAfterPage());
       case AppRouteName.setPwd:
         final phoneNum = (settings.arguments as Map)['phoneNumber'] as String;
         return CupertinoPageRoute(builder: (_) =>  SetPassWordPage(phoneNum: phoneNum));