feat:看题选字/选图UI和部分逻辑

liangchengyou
1 parent 0fd4b04b
Showing 15 changed files with 477 additions and 12 deletions
assets/images/background_grass.png
assets/images/choose.png
lib/home/home_page.dart
lib/listen/bloc/listen_bloc.dart
lib/listen/widgets/listen_item_widget.dart
lib/practice/chosetopic/topicpicture/bloc/topic_picture_bloc.dart
lib/practice/chosetopic/topicpicture/bloc/topic_picture_event.dart
lib/practice/chosetopic/topicpicture/bloc/topic_picture_state.dart
lib/practice/chosetopic/topicpicture/topic_picture_page.dart
lib/practice/chosetopic/topicword/bloc/topic_word_bloc.dart
lib/practice/chosetopic/topicword/bloc/topic_word_event.dart
lib/practice/chosetopic/topicword/bloc/topic_word_state.dart
lib/practice/chosetopic/topicword/topic_word_page.dart
lib/practice/widgets/practice_header_widget.dart
lib/route/route.dart
@@ -33,7 +33,8 @@ class _HomePageView extends StatelessWidget {
     } else if (type == HeaderActionType.shop) {
       Navigator.of(AppRouter.context).pushNamed(AppRouteName.shop);
     } else {
-
+      // Navigator.of(AppRouter.context).pushNamed(AppRouteName.topicPic);
+      Navigator.of(AppRouter.context).pushNamed(AppRouteName.topicWord);
     }
   }
  
-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 'listen_event.dart';
 part 'listen_state.dart';
@@ -33,7 +33,7 @@ class ListenItemWidget extends StatelessWidget {
                     fit: BoxFit.fill,
                   ),
                   Offstage(
-                    offstage: isLock??false,
+                    offstage: isLock,
                     child: Container(
                       height: 180.h,
                       width: 180.h,
-
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
  
@@ -6,9 +5,37 @@ part &#39;topic_picture_event.dart&#39;;
 part 'topic_picture_state.dart';
  
 class TopicPictureBloc extends Bloc<TopicPictureEvent, TopicPictureState> {
-  TopicPictureBloc() : super(TopicPictureInitial()) {
-    on<TopicPictureEvent>((event, emit) {
-      // TODO: implement event handler
-    });
+
+  final PageController pageController;
+
+  final int modelCount;
+
+  int _currentPage = 0;
+
+  int _selectItem = 0;
+
+  int get currentPage => _currentPage + 1;
+
+  int get selectItem => _selectItem;
+
+  TopicPictureBloc(this.pageController, this.modelCount) : super(TopicPictureInitial()) {
+    on<CurrentPageIndexChangeEvent>(_pageControllerChange);
+    on<SelectItemEvent>(_selectItemLoad);
+  }
+
+  @override
+  Future<void> close() {
+    pageController.dispose();
+    return super.close();
+  }
+
+  void _pageControllerChange(CurrentPageIndexChangeEvent event,Emitter<TopicPictureState> emitter) async {
+    _currentPage = event.pageIndex;
+    emitter(CurrentPageIndexState());
+  }
+
+  void _selectItemLoad(SelectItemEvent event,Emitter<TopicPictureState> emitter) async {
+    _selectItem = event.selectIndex;
+    emitter(SelectItemChangeState());
   }
 }
@@ -2,3 +2,13 @@ part of &#39;topic_picture_bloc.dart&#39;;
  
 @immutable
 abstract class TopicPictureEvent {}
+
+class CurrentPageIndexChangeEvent extends TopicPictureEvent {
+  final int pageIndex;
+  CurrentPageIndexChangeEvent(this.pageIndex);
+}
+
+class SelectItemEvent extends TopicPictureEvent {
+  final int selectIndex;
+  SelectItemEvent(this.selectIndex);
+}
 \ No newline at end of file
@@ -4,3 +4,7 @@ part of &#39;topic_picture_bloc.dart&#39;;
 abstract class TopicPictureState {}
  
 class TopicPictureInitial extends TopicPictureState {}
+
+class CurrentPageIndexState extends TopicPictureState {}
+
+class SelectItemChangeState extends TopicPictureState {}
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
+import 'package:wow_english/practice/chosetopic/topicpicture/bloc/topic_picture_bloc.dart';
+
+import '../../widgets/practice_header_widget.dart';
  
 class TopicPicturePage extends StatelessWidget {
   const TopicPicturePage({super.key});
  
   @override
   Widget build(BuildContext context) {
-    // TODO: implement build
-    throw UnimplementedError();
+    return BlocProvider(
+      create: (context) => TopicPictureBloc(PageController(),3),
+      child: _TopicPicturePage(),
+    );
+  }
+}
+
+class _TopicPicturePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<TopicPictureBloc,TopicPictureState>(
+      listener: (context, state){},
+      child: _topicPictureView(),
+    );
   }
+
+  Widget _topicPictureView() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
+      buildWhen: (_,s) => s is CurrentPageIndexState,
+      builder: (context,state){
+        final bloc = BlocProvider.of<TopicPictureBloc>(context);
+        return Container(
+          color: Colors.white,
+          child: Stack(
+            children: [
+              Column(
+                children: [
+                  PracticeHeaderWidget(
+                    title: '${bloc.currentPage}/8',
+                    onTap: (){Navigator.pop(context);},
+                  ),
+                  Expanded(
+                    child: PageView.builder(
+                        itemCount: 8,
+                        scrollDirection: Axis.horizontal,
+                        controller: bloc.pageController,
+                        onPageChanged: (int index) {
+                          bloc.add(CurrentPageIndexChangeEvent(index));
+                        },
+                        itemBuilder: (BuildContext context,int index){
+                          return _pageViewItemWidget();
+                        }),
+                  )
+                ],
+              ),
+              Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: Image.asset('bottom_grass'.assetPng)
+              )
+            ],
+          ),
+        );
+      });
+
+  Widget _pageViewItemWidget() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
+      builder: (context, state){
+        final bloc = BlocProvider.of<TopicPictureBloc>(context);
+        return SafeArea(
+          child: Column(
+            children: [
+              Text(
+                  'What to do when the sentence question is very long and needs a line break',
+                  softWrap: true,
+                  style: TextStyle(
+                      fontSize: 21.sp,
+                      color: const Color(0xFF333333)
+                  )
+              ),
+              26.verticalSpace,
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Offstage(
+                    offstage: (bloc.modelCount < 1),
+                    child: _decodeImageWidget(1),
+                  ),
+                  Offstage(
+                    offstage: (bloc.modelCount < 2),
+                    child: _decodeImageWidget(2),
+                  ),
+                  Offstage(
+                    offstage: (bloc.modelCount < 3),
+                    child: _decodeImageWidget(3),
+                  ),
+                  Offstage(
+                    offstage: (bloc.modelCount < 4),
+                    child: _decodeImageWidget(4),
+                  )
+                ],
+              )
+            ],
+          ),
+        );
+      });
+
+  Widget _decodeImageWidget(int index) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
+      buildWhen: (_, s) => s is SelectItemChangeState,
+      builder: (context,state){
+        final bloc = BlocProvider.of<TopicPictureBloc>(context);
+        return GestureDetector(
+          onTap: () => bloc.add(SelectItemEvent(index)),
+          child: Container(
+            padding: const EdgeInsets.all(4.5),
+            decoration: BoxDecoration(
+              color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
+              borderRadius: BorderRadius.circular(15),
+            ),
+            height: 143.h,
+            width: 143.w,
+            child: Container(
+              decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(15),
+                  border: Border.all(
+                      width: 1.0,
+                      color: const Color(0xFF140C10)
+                  ),
+                  image: const DecorationImage(
+                      fit: BoxFit.fitWidth,
+                      image: NetworkImage('https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714')
+                  )
+              ),
+            ),
+          ),
+        );
+      });
 }
 \ No newline at end of file
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+part 'topic_word_event.dart';
+part 'topic_word_state.dart';
+
+class TopicWordBloc extends Bloc<TopicWordEvent, TopicWordState> {
+  final PageController pageController;
+
+  final int modelCount;
+
+  int _currentPage = 0;
+
+  int _selectItem = 0;
+
+  int get currentPage => _currentPage + 1;
+
+  int get selectItem => _selectItem;
+
+  TopicWordBloc(this.pageController, this.modelCount) : super(TopicWordInitial()) {
+    on<CurrentPageIndexChangeEvent>(_pageControllerChange);
+    on<SelectItemEvent>(_selectItemLoad);
+  }
+
+  @override
+  Future<void> close() {
+    pageController.dispose();
+    return super.close();
+  }
+
+  void _pageControllerChange(CurrentPageIndexChangeEvent event,Emitter<TopicWordState> emitter) async {
+    _currentPage = event.pageIndex;
+    emitter(CurrentPageIndexState());
+  }
+
+  void _selectItemLoad(SelectItemEvent event,Emitter<TopicWordState> emitter) async {
+    _selectItem = event.selectIndex;
+    emitter(SelectItemChangeState());
+  }
+}
+part of 'topic_word_bloc.dart';
+
+@immutable
+abstract class TopicWordEvent {}
+
+class CurrentPageIndexChangeEvent extends TopicWordEvent {
+  final int pageIndex;
+  CurrentPageIndexChangeEvent(this.pageIndex);
+}
+
+class SelectItemEvent extends TopicWordEvent {
+  final int selectIndex;
+  SelectItemEvent(this.selectIndex);
+}
 \ No newline at end of file
+part of 'topic_word_bloc.dart';
+
+@immutable
+abstract class TopicWordState {}
+
+class TopicWordInitial extends TopicWordState {}
+
+class CurrentPageIndexState extends TopicWordState {}
+
+class SelectItemChangeState extends TopicWordState {}
 \ No newline at end of file
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
+import 'package:wow_english/practice/chosetopic/topicword/bloc/topic_word_bloc.dart';
+import 'package:wow_english/practice/widgets/practice_header_widget.dart';
+
+class TopicWordPage extends StatelessWidget {
+  const TopicWordPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => TopicWordBloc(PageController(), 3),
+      child: _TopicWordPage(),
+    );
+  }
+}
+
+class _TopicWordPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<TopicWordBloc,TopicWordState>(
+      listener: (context, state) {
+
+      },
+      child: _topicWordView(),
+    );
+  }
+
+  Widget _topicWordView() => BlocBuilder<TopicWordBloc,TopicWordState>(
+      builder: (context,state){
+        final bloc = BlocProvider.of<TopicWordBloc>(context);
+        return Container(
+          color: Colors.white,
+          child: Stack(
+            children: [
+              Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: Image.asset('background_grass'.assetPng,fit: BoxFit.fitWidth,)
+              ),
+              Column(
+                children: [
+                  PracticeHeaderWidget(
+                    title: '${bloc.currentPage}/8',
+                    onTap: (){Navigator.pop(context);},
+                  ),
+                  Expanded(
+                    child: PageView.builder(
+                        itemCount: 8,
+                        scrollDirection: Axis.horizontal,
+                        controller: bloc.pageController,
+                        onPageChanged: (int index) {
+                          bloc.add(CurrentPageIndexChangeEvent(index));
+                        },
+                        itemBuilder: (BuildContext context,int index){
+                          return _pageViewItemWidget();
+                        }),
+                  )
+                ],
+              ),
+            ],
+          ),
+        );
+      });
+
+  Widget _pageViewItemWidget() => BlocBuilder<TopicWordBloc,TopicWordState>(
+      builder: (context, state){
+        final bloc = BlocProvider.of<TopicWordBloc>(context);
+        return SafeArea(
+          child: Column(
+            children: [
+              Text(
+                  'What to do when the sentence question is very long and needs a line break',
+                  softWrap: true,
+                  style: TextStyle(
+                      fontSize: 21.sp,
+                      color: const Color(0xFF333333)
+                  )
+              ),
+              26.verticalSpace,
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Offstage(
+                    offstage: (bloc.modelCount < 1),
+                    child: _decodeImageWidget(1),
+                  ),
+                  Offstage(
+                    offstage: (bloc.modelCount < 2),
+                    child: _decodeImageWidget(2),
+                  ),
+                  Offstage(
+                    offstage: (bloc.modelCount < 3),
+                    child: _decodeImageWidget(3),
+                  ),
+                  Offstage(
+                    offstage: (bloc.modelCount < 4),
+                    child: _decodeImageWidget(4),
+                  )
+                ],
+              )
+            ],
+          ),
+        );
+      });
+
+  Widget _decodeImageWidget(int index) => BlocBuilder<TopicWordBloc,TopicWordState>(
+      buildWhen: (_, s) => s is SelectItemChangeState,
+      builder: (context,state){
+        final bloc = BlocProvider.of<TopicWordBloc>(context);
+        return GestureDetector(
+          onTap: () => bloc.add(SelectItemEvent(index)),
+          child: Container(
+            width: 143.w,
+            height: 143.h,
+            padding: EdgeInsets.only(left: 13.w,right: 13.w,top: 13.h,bottom: 13.h),
+            decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(15),
+                border: Border.all(
+                    width: 1.0,
+                    color: const Color(0xFF140C10)
+                ),
+            ),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                Expanded(
+                  child: Container(
+                    alignment: Alignment.center,
+                    child: Text(
+                        'yellow',
+                        style: TextStyle(
+                            fontSize: 20.sp,
+                            color: const Color(0xFF333333)
+                        )
+                    ),
+                  ),
+                ),
+                Container(
+                  height: 30.h,
+                  width: double.infinity,
+                  decoration: BoxDecoration(
+                    color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
+                    borderRadius: BorderRadius.circular(15.r),
+                    border: Border.all(
+                        width: 1.5,
+                        color: const Color(0xFF140C10)
+                    ),
+                  ),
+                  alignment: Alignment.center,
+                  child: Image.asset('choose'.assetPng),
+                )
+              ],
+            ),
+          ),
+        );
+      });
+}
 \ 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 PracticeHeaderWidget extends StatelessWidget {
+  const PracticeHeaderWidget({super.key, required this.onTap,this.title = ''});
+
+  final Function() onTap;
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      height: 60.h,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Padding(
+            padding: EdgeInsets.only(
+                left: ScreenUtil().bottomBarHeight
+              ),
+            child: IconButton(
+                onPressed: (){
+                  onTap();
+                },
+                icon: Image.asset(
+                  'back_around'.assetPng,
+                  width: 40,
+                  height: 40,
+                )),
+          ),
+          Container(
+            height: 40.h,
+            padding: EdgeInsets.symmetric(horizontal: 27.w),
+            decoration: BoxDecoration(
+              color: const Color(0xFF00B6F1),
+              borderRadius: BorderRadius.circular(20.r),
+              border: Border.all(
+                width: 1.0,
+                color: const Color(0xFF333333),
+              ),
+            ),
+            alignment: Alignment.center,
+            child: Text(
+              title,
+              style: TextStyle(
+                  fontSize: 20.sp,
+                  color: Colors.white
+              ),
+            ),
+          ),
+          ScreenUtil().bottomBarHeight.horizontalSpace,
+        ],
+      ),
+    );
+  }
+}
 \ No newline at end of file
@@ -8,6 +8,8 @@ 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/practice/chosetopic/topicpicture/topic_picture_page.dart';
+import 'package:wow_english/practice/chosetopic/topicword/topic_word_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';
@@ -28,6 +30,8 @@ class AppRouteName {
   static const String exLesson = 'exLesson';
   static const String exList = 'exList';
   static const String reAfter = 'reAfter';
+  static const String topicPic = 'topicPic';
+  static const String topicWord = 'topicWord';
   static const String tab = '/';
 }
  
@@ -62,6 +66,10 @@ class AppRouter {
         return CupertinoPageRoute(builder: (_) =>  const ExchangeLessonListPage());
       case AppRouteName.reAfter:
         return CupertinoPageRoute(builder: (_) =>  const RepeatAfterPage());
+      case AppRouteName.topicPic:
+        return CupertinoPageRoute(builder: (_) =>  const TopicPicturePage());
+      case AppRouteName.topicWord:
+        return CupertinoPageRoute(builder: (_) =>  const TopicWordPage());
       case AppRouteName.setPwd:
         final phoneNum = (settings.arguments as Map)['phoneNumber'] as String;
         return CupertinoPageRoute(builder: (_) =>  SetPassWordPage(phoneNum: phoneNum));