feat:课程购买UI逻辑

liangchengyou
1 parent 9d080046
Showing 11 changed files with 176 additions and 11 deletions
lib/app/app.dart
lib/home/home_page.dart
lib/home/widgets/home_tab_header_widget.dart
lib/listen/listen_page.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_page.dart
lib/practice/chosetopic/topicpicture/topic_picture_state.dart
lib/shop/exchangelist/widgets/exchange_list_item.dart
lib/shop/home/shop_home_page.dart
lib/shop/home/widgets/lesson_card_item.dart
@@ -31,6 +31,7 @@ class App extends StatelessWidget {
                 builder: (context,child) => ResponsiveBreakpoints(
                     breakpoints: const [
                       Breakpoint(start: 0, end: 450, name: MOBILE),
+                      Breakpoint(start: 0, end: 450, name: PHONE),
                       Breakpoint(start: 451, end: 800, name: TABLET),
                       Breakpoint(start: 801, end: 1920, name: DESKTOP),
                       Breakpoint(start: 1921, end: double.infinity, name: '4K'),
@@ -70,9 +70,6 @@ class _HomePageView extends StatelessWidget {
                         },
                         itemBuilder: (BuildContext context,int index){
                           return const HomeLessonItem();
-                          // return Container(
-                          //     color:index%2==0?Colors.red:Colors.blue
-                          // );
                         })
                     ,
                   ),
@@ -24,7 +24,7 @@ class HomeTabHeaderWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 45.h,
+      height: 45,
       width: double.infinity,
       color: Colors.purple,
       padding: EdgeInsets.symmetric(horizontal: 9.5.w),
@@ -71,11 +71,11 @@ class HomeTabHeaderWidget extends StatelessWidget {
                     style: BorderStyle.solid
                 ),
               ),
-              child:  const Text(
+              child:  Text(
                 'franky',
                 style: TextStyle(
-                    color: Color(0xFF333333),
-                    fontSize: 16
+                    color: const Color(0xFF333333),
+                    fontSize: 16.sp
                 ),
               ),
             ),
@@ -39,7 +39,7 @@ class _ListenPageView extends StatelessWidget {
         return ListView.builder(
             itemCount: 10,
             scrollDirection: Axis.horizontal,
-            padding: EdgeInsets.symmetric(horizontal: 30.w,vertical: 36.h),
+            padding: EdgeInsets.symmetric(horizontal: 30.w,vertical: 30.h),
             itemBuilder: (BuildContext context,int index){
               return ListenItemWidget(
                   isLock: (index < 5),
+import 'dart:async';
+
+import 'package:bloc/bloc.dart';
+import 'package:meta/meta.dart';
+
+part 'topic_picture_event.dart';
+part '../topic_picture_state.dart';
+
+class TopicPictureBloc extends Bloc<TopicPictureEvent, TopicPictureState> {
+  TopicPictureBloc() : super(TopicPictureInitial()) {
+    on<TopicPictureEvent>((event, emit) {
+      // TODO: implement event handler
+    });
+  }
+}
+part of 'topic_picture_bloc.dart';
+
+@immutable
+abstract class TopicPictureEvent {}
+import 'package:flutter/material.dart';
+
+class TopicPicturePage extends StatelessWidget {
+  const TopicPicturePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    // TODO: implement build
+    throw UnimplementedError();
+  }
+}
 \ No newline at end of file
+part of 'bloc/topic_picture_bloc.dart';
+
+@immutable
+abstract class TopicPictureState {}
+
+class TopicPictureInitial extends TopicPictureState {}
@@ -31,8 +31,8 @@ class ExchangeListItem extends StatelessWidget {
             child: Row(
               children: [
                 Container(
-                  width: 70,
-                  height: 70,
+                  width: 70.w,
+                  height: 70.h,
                   decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(5.r),
                     border: Border.all(
@@ -47,7 +47,7 @@ class ExchangeListItem extends StatelessWidget {
                 17.horizontalSpace,
                 Expanded(
                   child: Column(
-                    mainAxisAlignment: MainAxisAlignment.center,
+                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                     children: [
                       Row(
                         children: [
@@ -6,6 +6,7 @@ import &#39;package:wow_english/common/extension/string_extension.dart&#39;;
 import 'package:wow_english/common/widgets/we_app_bar.dart';
 import 'package:wow_english/route/route.dart';
 import 'package:wow_english/shop/home/bloc/shop_home_bloc.dart';
+import 'package:wow_english/shop/home/widgets/lesson_card_item.dart';
  
 class ShopHomePage extends StatelessWidget {
   const ShopHomePage({super.key});
@@ -56,6 +57,25 @@ class _ShopHomeView extends StatelessWidget {
           )
         ],
       ),
+      body: Center(
+        child: Padding(
+          padding: EdgeInsets.symmetric(vertical: 25.h,horizontal: 25.w),
+          child: GridView.builder(
+              itemCount: 4,
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 2,
+                childAspectRatio: 2,
+                mainAxisSpacing: 14.h,
+                crossAxisSpacing : 4.5.w,
+              ),
+              itemBuilder: (BuildContext context,int index){
+                return LessonCardItem(
+                  onTap: (){
+                    EasyLoading.showToast('购买');
+                  });
+              }),
+        ),
+      ),
     );
   });
 }
 \ No newline at end of file
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class LessonCardItem extends StatelessWidget {
+  const LessonCardItem({super.key, required this.onTap});
+
+  final Function() onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(10.r),
+        color: Colors.blue,
+        border: Border.all(
+          width: 1.0,
+          color: Colors.black
+        )
+        // image: DecorationImage(
+        //   image: AssetImage(
+        //     ''.assetPng,
+        //   ),
+        //   fit: BoxFit.fill
+        // )
+      ),
+      padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 16.h),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Container(
+            width: 124.w,
+            decoration: BoxDecoration(
+                border: Border.all(
+                  width: 1.0,
+                  color: const Color(0xFF333333),
+                ),
+                image: const DecorationImage(
+                  fit: BoxFit.fill,
+                  image: 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'),
+                )
+            ),
+          ),
+          21.5.horizontalSpace,
+          Expanded(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                Text(
+                  'Wow English 课程年卡',
+                  softWrap: true,
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                      fontSize: 12.sp,
+                      color: const Color(0xFF333333)
+                  ),
+                ),
+                RichText(
+                  text: TextSpan(
+                      children:[
+                        TextSpan(
+                            text: '¥',
+                            style: TextStyle(
+                              fontSize: 21.sp,
+                              color: const Color(0xFFF51A1A),
+                            )
+                        ),
+                        TextSpan(
+                            text: '998',
+                            style: TextStyle(
+                              fontSize: 40.sp,
+                              color: const Color(0xFFF51A1A),
+                            ),
+                        )
+                      ]
+                  ),
+                ),
+                GestureDetector(
+                  onTap: () {
+                    onTap();
+                  },
+                  child: Container(
+                    decoration: BoxDecoration(
+                        color: const Color(0xFFF5C51F),
+                        borderRadius: BorderRadius.circular(5.r),
+                        border: Border.all(
+                          color: const Color(0xFF333333),
+                          width: 1.0,
+                        )
+                    ),
+                    padding: EdgeInsets.symmetric(
+                      vertical: 1.h,
+                      horizontal: 26.5.w,
+                    ),
+                    child: Text(
+                      '立即购买',
+                      style: TextStyle(
+                          fontSize: 10.sp,
+                          color: const Color(0xFF333333)
+                      ),
+                    ),
+                  ),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
 \ No newline at end of file