feat:磨耳朵功能UI

liangchengyou
1 parent 60e47f7c
Showing 19 changed files with 336 additions and 79 deletions
assets/images/back_around.png
assets/images/blue-positive.png
assets/images/listen_lock.png
lib/app/splash_page.dart
lib/common/widgets/we_app_bar.dart
lib/home/bloc/home_bloc.dart
lib/home/home_page.dart
lib/home/widgets/home_lesson_item_widget.dart
lib/home/widgets/home_tab_header_widget.dart
lib/lessons/lesson_page.dart
lib/listen/bloc/listen_bloc.dart
lib/listen/bloc/listen_event.dart
lib/listen/bloc/listen_state.dart
lib/listen/listen_page.dart
lib/listen/widgets/listen_item_widget.dart
lib/pages/page1.dart
lib/pages/page2.dart
lib/route/route.dart
lib/tab/tab_page.dart
@@ -29,7 +29,7 @@ class _TransitionViewState extends State&lt;TransitionView&gt; {
   Future startTime() async {
     Timer(const Duration(seconds: 2),() {
       if(BasicConfigurationManager().sessionId!.isNotEmpty) {
-        Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.tab, (route) => false);
+        Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.home, (route) => false);
       } else {
         Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.login,(route) => false);
       }
@@ -31,9 +31,9 @@ class WEAppBar extends StatelessWidget implements PreferredSizeWidget {
         child: Container(
           alignment: Alignment.center,
           child: Image.asset(
-            'back'.assetPng,
-            height: 43,
-            width: 43,
+            'back_around'.assetPng,
+            height: 40,
+            width: 40,
           ),
         ),
       ),
-import 'dart:async';
-
-import 'package:bloc/bloc.dart';
-import 'package:meta/meta.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 part 'home_event.dart';
 part 'home_state.dart';
 class HomeBloc extends Bloc<HomeEvent, HomeState> {
-  HomeBloc() : super(HomeInitial()) {
+  final PageController pageController;
+  HomeBloc(this.pageController) : super(HomeInitial()) {
     on<HomeEvent>((event, emit) {
       // TODO: implement event handler
     });
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_easyloading/flutter_easyloading.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
 import 'package:wow_english/home/bloc/home_bloc.dart';
+import 'package:wow_english/home/widgets/home_lesson_item_widget.dart';
 import 'package:wow_english/home/widgets/home_tab_header_widget.dart';
 import 'package:wow_english/route/route.dart';
@@ -10,7 +14,9 @@ class HomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (context) => HomeBloc(),
+      create: (context) => HomeBloc(PageController(
+        initialPage: 0,
+      )),
       child: _HomePageView(),
     );
   }
@@ -23,7 +29,9 @@ class _HomePageView extends StatelessWidget {
     } else if (type == HeaderActionType.phase) {
       Navigator.of(AppRouter.context).pushNamed(AppRouteName.lesson);
     } else if (type == HeaderActionType.listen) {
-
+      Navigator.of(AppRouter.context).pushNamed(AppRouteName.listen);
+    } else if (type == HeaderActionType.shop) {
+      
     } else {
     }
@@ -33,22 +41,78 @@ class _HomePageView extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocListener<HomeBloc,HomeState>(
       listener: (context, state){},
-      child: Scaffold(
-        body: Container(
-          color: Colors.white,
-          child:  Center(
-            child: Column(
-              children: [
-                HomeTabHeaderWidget(
-                  actionTap: (HeaderActionType type) {
-                    _headerActionEvent(type);
-                  },
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
+      child: _homeView(),
     );
   }
+
+  Widget _homeView() => BlocBuilder<HomeBloc,HomeState>(
+      builder: (context, state){
+        final bloc = BlocProvider.of<HomeBloc>(context);
+        return Scaffold(
+          body: Container(
+            color: Colors.white,
+            child:  Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  HomeTabHeaderWidget(
+                    actionTap: (HeaderActionType type) {
+                      _headerActionEvent(type);
+                    },
+                  ),
+                  Expanded(
+                    child: PageView.builder(
+                        itemCount: 10,
+                        controller: bloc.pageController,
+                        pageSnapping: false,
+                        onPageChanged: (int index) {
+                          EasyLoading.showToast(index.toString());
+                        },
+                        itemBuilder: (BuildContext context,int index){
+                          return const HomeLessonItem();
+                          // return Container(
+                          //     color:index%2==0?Colors.red:Colors.blue
+                          // );
+                        })
+                    ,
+                  ),
+                  SafeArea(
+                    child: Padding(
+                      padding: EdgeInsets.symmetric(horizontal: 13.w),
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          SizedBox(
+                            height: 47.h,
+                            width: 80.w,
+                          ),
+                          Container(
+                            decoration: BoxDecoration(
+                              color: Colors.blue,
+                              borderRadius: BorderRadius.circular(14.5.r),
+                            ),
+                            padding: EdgeInsets.symmetric(vertical: 8.h,horizontal: 24.w),
+                            child: Text(
+                              '3/67',
+                              style: TextStyle(
+                                  color: Colors.white,
+                                  fontSize: 12.sp
+                              ),
+                            ),
+                          ),
+                          Image.asset(
+                            'blue-positive'.assetPng,
+                            height: 47.h,
+                            width: 80.w,
+                          ),
+                        ],
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            ),
+          ),
+        );
+      });
 }
 \ No newline at end of file
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class HomeLessonItem extends StatelessWidget {
+  const HomeLessonItem({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: double.infinity,
+      child: ListView.builder(
+          itemCount: 5,
+          scrollDirection: Axis.horizontal,
+          physics: const NeverScrollableScrollPhysics(),
+          itemBuilder: (BuildContext context,int index){
+            return Padding(
+              padding: EdgeInsets.symmetric(horizontal: 4.w),
+              child: Image.network(
+                'https://img.liblibai.com/web/648331d5a2cb5.png?image_process=format,webp&x-oss-process=image/resize,w_2980,m_lfit/format,webp',
+              ),
+            );
+          }),
+    );
+  }
+}
 \ No newline at end of file
@@ -11,6 +11,8 @@ enum HeaderActionType {
   listen,
   //购买
   shop,
+  //个人信息
+  userinfo
 }
 class HomeTabHeaderWidget extends StatelessWidget {
@@ -29,20 +31,54 @@ class HomeTabHeaderWidget extends StatelessWidget {
       child: Row(
         children: [
           ScreenUtil().bottomBarHeight.horizontalSpace,
-          ClipRRect(
-            borderRadius:BorderRadius.circular(21),
-            child: Image.network(
-              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faa1c2213-820a-4223-8757-5f8cee318a28%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688713226&t=192b18a613683bcdc5bd76f65c9ff032',
-              height: 42,
-              width: 42,
-              fit: BoxFit.fill,
+          GestureDetector(
+            onTap: () {
+              if(actionTap != null) {
+                actionTap!(HeaderActionType.userinfo);
+              }
+            },
+            child: Container(
+              decoration: BoxDecoration(
+                border: Border.all(
+                  width: 1.0,
+                  color: const Color(0xFF140C10),
+                ),
+                borderRadius: BorderRadius.circular(21),
+              ),
+              child: const CircleAvatar(
+                radius: 21,
+                backgroundImage: NetworkImage(
+                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faa1c2213-820a-4223-8757-5f8cee318a28%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688713226&t=192b18a613683bcdc5bd76f65c9ff032'
+                ),
+              ),
             ),
           ),
-          Container(
-            color: Colors.white,
-            margin: const EdgeInsets.only(left: 7),
-            padding: const EdgeInsets.all(7.0),
-            child:  const Text('franky'),
+          GestureDetector(
+            onTap: () {
+              if(actionTap != null) {
+                actionTap!(HeaderActionType.userinfo);
+              }
+            },
+            child: Container(
+              margin: const EdgeInsets.only(left: 7),
+              padding: const EdgeInsets.all(4.0),
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(2),
+                border: Border.all(
+                    width: 1.0,
+                    color: const Color(0xFF140C10),
+                    style: BorderStyle.solid
+                ),
+              ),
+              child:  const Text(
+                'franky',
+                style: TextStyle(
+                    color: Color(0xFF333333),
+                    fontSize: 16
+                ),
+              ),
+            ),
           ),
           20.horizontalSpace,
           const Expanded(
@@ -41,6 +41,16 @@ class _LessonPageView extends StatelessWidget {
       listener: (context, state){},
       child: Scaffold(
         appBar: WEAppBar(
+          leading: IconButton(
+              onPressed: (){
+                Navigator.pop(context);
+              },
+              icon: Image.asset(
+                'back'.assetPng,
+                height: 43,
+                width: 43,
+              )
+          ),
           actions: <Widget>[
             IconButton(
               icon: Image.asset('shop'.assetPng),
+import 'dart:async';
+
+import 'package:bloc/bloc.dart';
+import 'package:meta/meta.dart';
+
+part 'listen_event.dart';
+part 'listen_state.dart';
+
+class ListenBloc extends Bloc<ListenEvent, ListenState> {
+  ListenBloc() : super(ListenInitial()) {
+    on<ListenEvent>((event, emit) {
+      // TODO: implement event handler
+    });
+  }
+}
+part of 'listen_bloc.dart';
+
+@immutable
+abstract class ListenEvent {}
+part of 'listen_bloc.dart';
+
+@immutable
+abstract class ListenState {}
+
+class ListenInitial extends ListenState {}
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/widgets/we_app_bar.dart';
+import 'package:wow_english/listen/bloc/listen_bloc.dart';
+import 'package:wow_english/listen/widgets/listen_item_widget.dart';
+
+class ListenPage extends StatelessWidget {
+  const ListenPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => ListenBloc(),
+      child: _ListenPageView(),
+    );
+  }
+}
+
+class _ListenPageView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<ListenBloc, ListenState>(
+      listener: (context, state) {
+
+      },
+      child: Scaffold(
+        appBar: const WEAppBar(
+          titleText: '磨耳朵',
+          centerTitle: false,
+        ),
+        body: _listenView(),
+      ),
+    );
+  }
+
+  Widget _listenView() => BlocBuilder<ListenBloc, ListenState>(
+      builder: (context, state) {
+        return ListView.builder(
+            itemCount: 10,
+            scrollDirection: Axis.horizontal,
+            padding: EdgeInsets.symmetric(horizontal: 30.w,vertical: 36.h),
+            itemBuilder: (BuildContext context,int index){
+              return ListenItemWidget(
+                  isLock: (index < 5),
+                  clickEvent: (){
+
+                  });
+            });
+      });
+}
 \ No newline at end of file
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
+
+class ListenItemWidget extends StatelessWidget {
+  const ListenItemWidget({super.key, this.isLock = false, required this.clickEvent});
+
+  final Function() clickEvent;
+
+  final bool isLock;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 8.5.w),
+      child: Column(
+        children: [
+          GestureDetector(
+            onTap: () {
+              if (!isLock) {
+                clickEvent();
+              }
+            },
+            child: ClipRRect(
+              borderRadius:BorderRadius.circular(90),
+              child: Stack(
+                alignment:Alignment.center,
+                children: [
+                  Image.network(
+                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faa1c2213-820a-4223-8757-5f8cee318a28%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688713226&t=192b18a613683bcdc5bd76f65c9ff032',
+                    height: 180,
+                    width: 180,
+                    fit: BoxFit.fill,
+                  ),
+                  Offstage(
+                    offstage: isLock??false,
+                    child: Container(
+                      height: 180,
+                      width: 180,
+                      color: const Color.fromRGBO(1, 1, 0, 0.5),
+                    ),
+                  ),
+                  Offstage(
+                    offstage: isLock,
+                    child: Image.asset(
+                      'listen_lock'.assetPng,
+                      height: 36,
+                      width: 41,
+                    ),
+                  )
+                ],
+              ),
+            ),
+          ),
+          23.verticalSpace,
+          Container(
+            height: 40.h,
+            padding: const EdgeInsets.symmetric(horizontal: 22),
+            decoration: BoxDecoration(
+              color: const Color(0xFFFFCC00),
+              borderRadius: BorderRadius.circular(20.r),
+              border: Border.all(
+                width: 1.0,
+                color: const Color(0xFF333333),
+              ),
+            ),
+            alignment: Alignment.center,
+            child: Text(
+              'listen title',
+              style: TextStyle(
+                  fontSize: 15.sp
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
 \ No newline at end of file
-import 'package:flutter/material.dart';
-import 'package:wow_english/common/widgets/we_app_bar.dart';
-
-class Page1 extends StatelessWidget {
-  const Page1({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const Scaffold(
-      appBar: WEAppBar(
-        titleText: '页面1',
-      ),
-      body:Center(
-        child: Text('页面1'),
-      ),
-    );
-  }
-}
 \ No newline at end of file
-import 'package:flutter/material.dart';
-import 'package:wow_english/common/widgets/we_app_bar.dart';
-
-class Page2 extends StatelessWidget {
-  const Page2({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const Scaffold(
-      appBar: WEAppBar(
-        titleText: '页面2',
-      ),
-      body:Center(
-        child: Text('页面2'),
-      ),
-    );
-  }
-}
 \ No newline at end of file
@@ -4,6 +4,7 @@ import &#39;package:wow_english/app/splash_page.dart&#39;;
 import 'package:wow_english/common/pages/wow_web_page.dart';
 import 'package:wow_english/home/home_page.dart';
 import 'package:wow_english/lessons/lesson_page.dart';
+import 'package:wow_english/listen/listen_page.dart';
 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';
@@ -18,6 +19,7 @@ class AppRouteName {
   static const String setPwd = 'setPwd';
   static const String webView = 'webView';
   static const String lesson = 'lesson';
+  static const String listen = 'listen';
   static const String tab = '/';
 }
@@ -42,6 +44,8 @@ class AppRouter {
         return CupertinoPageRoute(builder: (_) =>  const ForgetPasswordHomePage());
       case AppRouteName.lesson:
         return CupertinoPageRoute(builder: (_) =>  const LessonPage());
+      case AppRouteName.listen:
+        return CupertinoPageRoute(builder: (_) =>  const ListenPage());
       case AppRouteName.setPwd:
         final phoneNum = (settings.arguments as Map)['phoneNumber'] as String;
         return CupertinoPageRoute(builder: (_) =>  SetPassWordPage(phoneNum: phoneNum));
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:wow_english/Pages/page1.dart';
-import 'package:wow_english/Pages/page2.dart';
+import 'package:wow_english/home/home_page.dart';
+import 'package:wow_english/lessons/lesson_page.dart';
 import 'package:wow_english/tab/blocs/tab_bloc.dart';
 class TabPage extends StatelessWidget {
   const TabPage({super.key});
   final _pages =const <Widget>[
-    Page1(),
-    Page2()
+    HomePage(),
+    LessonPage()
   ];
   final _tabIcons = const <Icon>[