liangchengyou / wow_english

Commit e620143bf72ab39c24f07a890338a968c949dc98

Authored by 吴启风
1 parent cfe7f488

feat:单元&课程解锁状态蒙层ui

Inline Side-by-side
Showing 8 changed files with 154 additions and 84 deletions
assets/images/listen_lock.png renamed to assets/images/iv_lock.png
View file @e620143

3.79 KB
lib/pages/listen/widgets/listen_item_widget.dart
  View file @e620143
... ... @@ -46,7 +46,7 @@ class ListenItemWidget extends StatelessWidget {
46 46 Visibility(
47 47 visible: entity?.lock??false,
48 48 child: Image.asset(
49   - 'listen_lock'.assetPng,
  49 + 'iv_lock'.assetPng,
50 50 height: 36.h,
51 51 width: 41.w,
52 52 ),
... ...
lib/pages/module/widgets/module_item_widget.dart
  View file @e620143
... ... @@ -6,6 +6,7 @@ import 'package:wow_english/models/course_module_entity.dart';
6 6  
7 7 import '../../section/courese_module_model.dart';
8 8  
  9 +///阶段（模块）item布局
9 10 class ModuleItemWidget extends StatelessWidget {
10 11 const ModuleItemWidget({super.key, required this.isSelected, this.model, this.onClickEvent});
11 12 ///是否被选中
... ...
lib/pages/repeatafter/widgets/repeat_after_item.dart
  View file @e620143
... ... @@ -130,7 +130,7 @@ class RepeatAfterItem extends StatelessWidget {
130 130 ),
131 131 alignment: Alignment.center,
132 132 child: Image.asset(
133   - 'listen_lock'.assetPng,
  133 + 'iv_lock'.assetPng,
134 134 height: 36.h,
135 135 width: 41.w,
136 136 ),
... ...
lib/pages/section/section_page.dart
  View file @e620143
... ... @@ -7,7 +7,7 @@ import 'package:wow_english/common/core/user_util.dart';
7 7 import 'package:wow_english/common/extension/string_extension.dart';
8 8 import 'package:wow_english/models/course_unit_entity.dart';
9 9 import 'package:wow_english/pages/section/section_type.dart';
10   -import 'package:wow_english/pages/section/widgets/home_video_item.dart';
  10 +import 'package:wow_english/pages/section/widgets/section_item.dart';
11 11 import 'package:wow_english/pages/section/widgets/section_bouns_item.dart';
12 12 import 'package:wow_english/pages/section/widgets/section_header_widget.dart';
13 13 import 'package:wow_english/route/route.dart';
... ... @@ -286,8 +286,8 @@ Widget _itemTransCard(
286 286 bloc.add(RequestEnterClassEvent(
287 287 sectionData.id.toString(), sectionData.courseType));
288 288 },
289   - child: SectionVideoItem(
290   - unitEntity: bloc.courseUnitEntity,
  289 + child: SectionItem(
  290 + courseModuleId: bloc.courseUnitEntity.courseModuleCode,
291 291 lessons: sectionData,
292 292 ),
293 293 );
... ...
lib/pages/section/widgets/home_video_item.dart renamed to lib/pages/section/widgets/section_item.dart
  View file @e620143
... ... @@ -7,65 +7,99 @@ import '../../../models/course_section_entity.dart';
7 7 import '../../../models/course_unit_entity.dart';
8 8 import '../courese_module_model.dart';
9 9  
10   -class SectionVideoItem extends StatelessWidget {
11   - const SectionVideoItem({super.key, this.lessons, this.unitEntity});
  10 +///环节item布局
  11 +class SectionItem extends StatelessWidget {
  12 + const SectionItem({super.key, this.lessons, this.courseModuleId});
12 13  
13   - final CourseUnitEntity? unitEntity;
  14 + final String? courseModuleId;
14 15 final CourseSectionEntity? lessons;
15 16  
16 17 @override
17 18 Widget build(BuildContext context) {
18 19 return Padding(
19 20 padding: EdgeInsets.symmetric(horizontal: 12.w,vertical: 24.h),
20   - child: Container(
21   - width: 165.w,
22   - padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 24.h),
23   - decoration: BoxDecoration(
24   - image: DecorationImage(
25   - image: AssetImage('gendubeij'.assetPng),
26   - fit: BoxFit.fill
27   - ),
  21 + child: Stack(
  22 + children: [
  23 + _normalItem(),
  24 + _lockWidget(),
  25 + ],
  26 + )
  27 + );
  28 + }
  29 +
  30 + Widget _normalItem() {
  31 + return Container(
  32 + width: 165.w,
  33 + padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 24.h),
  34 + decoration: BoxDecoration(
  35 + image: DecorationImage(
  36 + image: AssetImage('gendubeij'.assetPng),
  37 + fit: BoxFit.fill
28 38 ),
29   - child: Column(
30   - mainAxisAlignment: MainAxisAlignment.spaceBetween,
31   - children: [
32   - Expanded(
33   - child: Container(
34   - decoration: BoxDecoration(
35   - border: Border.all(
36   - width: 2,
37   - color: const Color(0xFF140C10),
38   - ),
39   - borderRadius: BorderRadius.circular(6)
40   - ),
41   - child: OwImageWidget(
42   - name: lessons?.coverUrl??'',
43   - fit: BoxFit.fitHeight,
44   - ),
45   - )
  39 + ),
  40 + child: Column(
  41 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
  42 + children: [
  43 + Expanded(
  44 + child: Container(
  45 + decoration: BoxDecoration(
  46 + border: Border.all(
  47 + width: 2,
  48 + color: const Color(0xFF140C10),
  49 + ),
  50 + borderRadius: BorderRadius.circular(6)
  51 + ),
  52 + child: OwImageWidget(
  53 + name: lessons?.coverUrl??'',
  54 + fit: BoxFit.fitHeight,
  55 + ),
  56 + )
  57 + ),
  58 + 24.verticalSpace,
  59 + Container(
  60 + decoration: BoxDecoration(
  61 + border: Border.all(
  62 + width: 2,
  63 + color: const Color(0xFF140C10),
  64 + ),
  65 + color: CourseModuleModel(courseModuleId ?? 'Phase-1').color,
  66 + borderRadius: BorderRadius.circular(6)
46 67 ),
47   - 24.verticalSpace,
48   - Container(
49   - decoration: BoxDecoration(
50   - border: Border.all(
51   - width: 2,
52   - color: const Color(0xFF140C10),
53   - ),
54   - color: CourseModuleModel(unitEntity?.courseModuleCode??'Phase-1').color,
55   - borderRadius: BorderRadius.circular(6)
  68 + padding: EdgeInsets.symmetric(horizontal: 10.w),
  69 + child: Text(
  70 + lessons?.name??'',
  71 + maxLines: 1,
  72 + style: TextStyle(
  73 + fontSize: 25.sp,
  74 + color: const Color(0xFF333333)
56 75 ),
57   - padding: EdgeInsets.symmetric(horizontal: 10.w),
58   - child: Text(
59   - lessons?.name??'',
60   - maxLines: 1,
61   - style: TextStyle(
62   - fontSize: 25.sp,
63   - color: const Color(0xFF333333)
  76 + ),
  77 + )
  78 + ],
  79 + ),
  80 + );
  81 + }
  82 +
  83 + ///锁定状态下蒙层视图
  84 + Widget _lockWidget() {
  85 + return Visibility(
  86 + visible: lessons?.lock ?? false,
  87 + child: Container(
  88 + width: 165.w,
  89 + decoration: BoxDecoration(
  90 + image: DecorationImage(
  91 + image: AssetImage(
  92 + 'gendubeij_mengban'.assetPng
64 93 ),
65   - ),
  94 + fit: BoxFit.fill
66 95 )
67   - ],
68 96 ),
  97 + alignment: Alignment.center,
  98 + // child: Image.asset(
  99 + // 'iv_lock'.assetPng,
  100 + // height: 36.h,
  101 + // width: 41.w,
  102 + // ),
69 103 ),
70 104 );
71 105 }
... ...
lib/pages/unit/view.dart
  View file @e620143
... ... @@ -12,7 +12,7 @@ import '../../utils/toast_util.dart';
12 12 import 'bloc.dart';
13 13 import 'event.dart';
14 14  
15   -// 课程列表页（多unit，参考口语星球的框或分割标志）
  15 +// 课程（单元）列表页（多unit，参考口语星球的框或分割标志）
16 16 class UnitPage extends StatelessWidget {
17 17 const UnitPage({super.key, this.courseModuleEntity});
18 18  
... ... @@ -57,7 +57,7 @@ class UnitPage extends StatelessWidget {
57 57 return GestureDetector(
58 58 onTap: () {
59 59 if (data.lock == true) {
60   - showToast('当前unit暂未解锁');
  60 + showToast('当前课程暂未解锁');
61 61 return;
62 62 }
63 63  
... ...
lib/pages/unit/widget/course_unit_item.dart
  View file @e620143
  1 +import 'package:flutter/cupertino.dart';
1 2 import 'package:flutter/material.dart';
2 3 import 'package:flutter_screenutil/flutter_screenutil.dart';
3 4 import 'package:wow_english/common/extension/string_extension.dart';
... ... @@ -5,6 +6,7 @@ import 'package:wow_english/common/widgets/ow_image_widget.dart';
5 6  
6 7 import '../../../models/course_unit_entity.dart';
7 8  
  9 +///课程（单元）item布局
8 10 class CourseUnitItem extends StatelessWidget {
9 11 const CourseUnitItem(
10 12 {super.key, required this.unitEntity, required this.unitLesson});
... ... @@ -16,41 +18,74 @@ class CourseUnitItem extends StatelessWidget {
16 18 Widget build(BuildContext context) {
17 19 return Padding(
18 20 padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 24.h),
  21 + child: Stack(
  22 + children: [
  23 + _normalItem(),
  24 + _lockWidget(),
  25 + ],
  26 + )
  27 + );
  28 + }
  29 +
  30 + Widget _normalItem() {
  31 + return Container(
  32 + width: 165.w,
  33 + padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 24.h),
  34 + decoration: BoxDecoration(
  35 + image: DecorationImage(
  36 + image: AssetImage('gendubeij'.assetPng), fit: BoxFit.fill),
  37 + ),
  38 + child: Column(
  39 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
  40 + children: [
  41 + Expanded(
  42 + child: Container(
  43 + decoration: BoxDecoration(
  44 + border: Border.all(
  45 + width: 2,
  46 + color: const Color(0xFF140C10),
  47 + ),
  48 + borderRadius: BorderRadius.circular(6)),
  49 + child: OwImageWidget(
  50 + name: unitLesson.coverUrl ?? '',
  51 + fit: BoxFit.fitHeight,
  52 + ),
  53 + )),
  54 + 20.verticalSpace,
  55 + SizedBox(
  56 + height: 40.h,
  57 + child: Text(
  58 + unitLesson.name ?? '',
  59 + maxLines: 2,
  60 + overflow: TextOverflow.ellipsis,
  61 + style:
  62 + TextStyle(fontSize: 11.sp, color: const Color(0xFF140C10)),
  63 + ),
  64 + )
  65 + ],
  66 + ),
  67 + );
  68 + }
  69 +
  70 + ///锁定状态下蒙层视图
  71 + Widget _lockWidget() {
  72 + return Visibility(
  73 + visible: unitLesson.lock ?? false,
19 74 child: Container(
20 75 width: 165.w,
21   - padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 24.h),
22 76 decoration: BoxDecoration(
23   - image: DecorationImage(
24   - image: AssetImage('gendubeij'.assetPng), fit: BoxFit.fill),
25   - ),
26   - child: Column(
27   - mainAxisAlignment: MainAxisAlignment.spaceBetween,
28   - children: [
29   - Expanded(
30   - child: Container(
31   - decoration: BoxDecoration(
32   - border: Border.all(
33   - width: 2,
34   - color: const Color(0xFF140C10),
35   - ),
36   - borderRadius: BorderRadius.circular(6)),
37   - child: OwImageWidget(
38   - name: unitLesson.coverUrl ?? '',
39   - fit: BoxFit.fitHeight,
40   - ),
41   - )),
42   - 20.verticalSpace,
43   - SizedBox(
44   - height: 40.h,
45   - child: Text(
46   - unitLesson.name ?? '',
47   - maxLines: 2,
48   - overflow: TextOverflow.ellipsis,
49   - style:
50   - TextStyle(fontSize: 11.sp, color: const Color(0xFF140C10)),
51   - ),
  77 + image: DecorationImage(
  78 + image: AssetImage(
  79 + 'gendubeij_mengban'.assetPng
  80 + ),
  81 + fit: BoxFit.fill
52 82 )
53   - ],
  83 + ),
  84 + alignment: Alignment.center,
  85 + child: Image.asset(
  86 + 'iv_lock'.assetPng,
  87 + height: 54.h,
  88 + width: 61.5.w,
54 89 ),
55 90 ),
56 91 );
... ...