feat:语音问答界面UI

liangchengyou
1 parent 95e3448c
Showing 7 changed files with 123 additions and 1 deletions
assets/images/micro_phone.png
lib/home/home_page.dart
lib/route/route.dart
lib/voiceanswer/bloc/voice_answer_bloc.dart
lib/voiceanswer/bloc/voice_answer_event.dart
lib/voiceanswer/bloc/voice_answer_state.dart
lib/voiceanswer/voice_answer_page.dart
@@ -37,7 +37,8 @@ class _HomePageView extends StatelessWidget {
       // Navigator.of(AppRouter.context).pushNamed(AppRouteName.topicWord);
       // Navigator.of(AppRouter.context).pushNamed(AppRouteName.lookVideo);
       // Navigator.of(AppRouter.context).pushNamed(AppRouteName.voicePic);
-      Navigator.of(AppRouter.context).pushNamed(AppRouteName.voiceWord);
+      // Navigator.of(AppRouter.context).pushNamed(AppRouteName.voiceWord);
+      Navigator.of(AppRouter.context).pushNamed(AppRouteName.voiceAnswer);
     }
   }
@@ -19,6 +19,7 @@ import &#39;package:wow_english/shop/home/shop_home_page.dart&#39;;
 import 'package:wow_english/tab/tab_page.dart';
 import 'package:wow_english/user/user_page.dart';
 import 'package:wow_english/video/lookvideo/look_video_page.dart';
+import 'package:wow_english/voiceanswer/voice_answer_page.dart';
 class AppRouteName {
@@ -38,6 +39,7 @@ class AppRouteName {
   static const String topicWord = 'topicWord';
   static const String voicePic = 'voicePic';
   static const String voiceWord = 'voiceWord';
+  static const String voiceAnswer = 'voiceAnswer';
   static const String user = 'user';
   static const String lookVideo = 'lookVideo';
   static const String tab = '/';
@@ -84,6 +86,8 @@ class AppRouter {
         return CupertinoPageRoute(builder: (_) =>  const VoicePicPage());
       case AppRouteName.voiceWord:
         return CupertinoPageRoute(builder: (_) =>  const VoiceWordPage());
+      case AppRouteName.voiceAnswer:
+        return CupertinoPageRoute(builder: (_) =>  const VoiceAnswerPage());
       case AppRouteName.lookVideo:
         return CupertinoPageRoute(builder: (_) =>  const LookVideoPage());
       case AppRouteName.setPwd:
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+part 'voice_answer_event.dart';
+part 'voice_answer_state.dart';
+
+class VoiceAnswerBloc extends Bloc<VoiceAnswerEvent, VoiceAnswerState> {
+  VoiceAnswerBloc() : super(VoiceAnswerInitial()) {
+    on<VoiceAnswerEvent>((event, emit) {
+      // TODO: implement event handler
+    });
+  }
+}
+part of 'voice_answer_bloc.dart';
+
+@immutable
+abstract class VoiceAnswerEvent {}
+part of 'voice_answer_bloc.dart';
+
+@immutable
+abstract class VoiceAnswerState {}
+
+class VoiceAnswerInitial extends VoiceAnswerState {}
+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/widgets/practice_header_widget.dart';
+import 'package:wow_english/voiceanswer/bloc/voice_answer_bloc.dart';
+
+class VoiceAnswerPage extends StatelessWidget {
+  const VoiceAnswerPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => VoiceAnswerBloc(),
+      child: _VoiceAnswerPage(),
+    );
+  }
+}
+
+class _VoiceAnswerPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<VoiceAnswerBloc,VoiceAnswerState>(
+      listener: (context, state) {},
+      child: _voiceAnswerView(),
+    );
+  }
+
+  Widget _voiceAnswerView() => BlocBuilder<VoiceAnswerBloc,VoiceAnswerState>(
+      builder: (context, state) {
+        final bloc = BlocProvider.of<VoiceAnswerBloc>(context);
+        return Container(
+          color: Colors.white,
+          child: Stack(
+            children: [
+              Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: Image.asset(
+                    'bottom_grass'.assetPng,
+                    fit: BoxFit.fitWidth,
+                  )),
+              Column(
+                children: [
+                  PracticeHeaderWidget(
+                    title: '1/8',
+                    onTap: () {
+                      Navigator.pop(context);
+                    },
+                  ),
+                  Expanded(
+                      child: PageView.builder(
+                          itemCount: 10,
+                          itemBuilder: (context, int index) {
+                            return _voiceAnswerItem();
+                          }))
+                ],
+              )
+            ],
+          ),
+        );
+      });
+
+  Widget _voiceAnswerItem() => BlocBuilder<VoiceAnswerBloc,VoiceAnswerState>(builder: (context, state) {
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Image.network(
+              'https://img.liblibai.com/web/648331d5a2cb5.png?image_process=format,webp&x-oss-process=image/resize,w_2980,m_lfit/format,webp',
+              height: 186.h,
+              width: 186.w,
+            ),
+            160.horizontalSpace,
+            Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Image.asset(
+                  'voice'.assetPng,
+                  height: 52.h,
+                  width: 46.w,
+                ),
+                70.verticalSpace,
+                Image.asset(
+                  'micro_phone'.assetPng,
+                  height: 75.w,
+                  width: 75.w,
+                )
+              ],
+            )
+          ],
+        );
+      });
+}