From e620143bf72ab39c24f07a890338a968c949dc98 Mon Sep 17 00:00:00 2001 From: wuqifeng <540416539@qq.com> Date: Wed, 15 May 2024 22:47:32 +0800 Subject: [PATCH] feat:单元&课程解锁状态蒙层ui --- assets/images/iv_lock.png | Bin 0 -> 3878 bytes assets/images/listen_lock.png | Bin 3878 -> 0 bytes lib/pages/listen/widgets/listen_item_widget.dart | 2 +- lib/pages/module/widgets/module_item_widget.dart | 1 + lib/pages/repeatafter/widgets/repeat_after_item.dart | 2 +- lib/pages/section/section_page.dart | 6 +++--- lib/pages/section/widgets/home_video_item.dart | 72 ------------------------------------------------------------------------ lib/pages/section/widgets/section_item.dart | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ lib/pages/unit/view.dart | 4 ++-- lib/pages/unit/widget/course_unit_item.dart | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------- 10 files changed, 180 insertions(+), 110 deletions(-) create mode 100644 assets/images/iv_lock.png delete mode 100644 assets/images/listen_lock.png delete mode 100644 lib/pages/section/widgets/home_video_item.dart create mode 100644 lib/pages/section/widgets/section_item.dart diff --git a/assets/images/iv_lock.png b/assets/images/iv_lock.png new file mode 100644 index 0000000..618912d Binary files /dev/null and b/assets/images/iv_lock.png differ diff --git a/assets/images/listen_lock.png b/assets/images/listen_lock.png deleted file mode 100644 index 618912d..0000000 Binary files a/assets/images/listen_lock.png and /dev/null differ diff --git a/lib/pages/listen/widgets/listen_item_widget.dart b/lib/pages/listen/widgets/listen_item_widget.dart index bd896fd..1274d40 100644 --- a/lib/pages/listen/widgets/listen_item_widget.dart +++ b/lib/pages/listen/widgets/listen_item_widget.dart @@ -46,7 +46,7 @@ class ListenItemWidget extends StatelessWidget { Visibility( visible: entity?.lock??false, child: Image.asset( - 'listen_lock'.assetPng, + 'iv_lock'.assetPng, height: 36.h, width: 41.w, ), diff --git a/lib/pages/module/widgets/module_item_widget.dart b/lib/pages/module/widgets/module_item_widget.dart index ad7e76b..81e53f8 100644 --- a/lib/pages/module/widgets/module_item_widget.dart +++ b/lib/pages/module/widgets/module_item_widget.dart @@ -6,6 +6,7 @@ import 'package:wow_english/models/course_module_entity.dart'; import '../../section/courese_module_model.dart'; +///阶段（模块）item布局 class ModuleItemWidget extends StatelessWidget { const ModuleItemWidget({super.key, required this.isSelected, this.model, this.onClickEvent}); ///是否被选中 diff --git a/lib/pages/repeatafter/widgets/repeat_after_item.dart b/lib/pages/repeatafter/widgets/repeat_after_item.dart index b796929..d2735bd 100644 --- a/lib/pages/repeatafter/widgets/repeat_after_item.dart +++ b/lib/pages/repeatafter/widgets/repeat_after_item.dart @@ -130,7 +130,7 @@ class RepeatAfterItem extends StatelessWidget { ), alignment: Alignment.center, child: Image.asset( - 'listen_lock'.assetPng, + 'iv_lock'.assetPng, height: 36.h, width: 41.w, ), diff --git a/lib/pages/section/section_page.dart b/lib/pages/section/section_page.dart index 78fc39f..cf6511e 100644 --- a/lib/pages/section/section_page.dart +++ b/lib/pages/section/section_page.dart @@ -7,7 +7,7 @@ import 'package:wow_english/common/core/user_util.dart'; import 'package:wow_english/common/extension/string_extension.dart'; import 'package:wow_english/models/course_unit_entity.dart'; import 'package:wow_english/pages/section/section_type.dart'; -import 'package:wow_english/pages/section/widgets/home_video_item.dart'; +import 'package:wow_english/pages/section/widgets/section_item.dart'; import 'package:wow_english/pages/section/widgets/section_bouns_item.dart'; import 'package:wow_english/pages/section/widgets/section_header_widget.dart'; import 'package:wow_english/route/route.dart'; @@ -286,8 +286,8 @@ Widget _itemTransCard( bloc.add(RequestEnterClassEvent( sectionData.id.toString(), sectionData.courseType)); }, - child: SectionVideoItem( - unitEntity: bloc.courseUnitEntity, + child: SectionItem( + courseModuleId: bloc.courseUnitEntity.courseModuleCode, lessons: sectionData, ), ); diff --git a/lib/pages/section/widgets/home_video_item.dart b/lib/pages/section/widgets/home_video_item.dart deleted file mode 100644 index 7542f42..0000000 --- a/lib/pages/section/widgets/home_video_item.dart +++ /dev/null @@ -1,72 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_screenutil/flutter_screenutil.dart'; -import 'package:wow_english/common/extension/string_extension.dart'; -import 'package:wow_english/common/widgets/ow_image_widget.dart'; - -import '../../../models/course_section_entity.dart'; -import '../../../models/course_unit_entity.dart'; -import '../courese_module_model.dart'; - -class SectionVideoItem extends StatelessWidget { - const SectionVideoItem({super.key, this.lessons, this.unitEntity}); - - final CourseUnitEntity? unitEntity; - final CourseSectionEntity? lessons; - - @override - Widget build(BuildContext context) { - return Padding( - padding: EdgeInsets.symmetric(horizontal: 12.w,vertical: 24.h), - child: Container( - width: 165.w, - padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 24.h), - decoration: BoxDecoration( - image: DecorationImage( - image: AssetImage('gendubeij'.assetPng), - fit: BoxFit.fill - ), - ), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: Container( - decoration: BoxDecoration( - border: Border.all( - width: 2, - color: const Color(0xFF140C10), - ), - borderRadius: BorderRadius.circular(6) - ), - child: OwImageWidget( - name: lessons?.coverUrl??'', - fit: BoxFit.fitHeight, - ), - ) - ), - 24.verticalSpace, - Container( - decoration: BoxDecoration( - border: Border.all( - width: 2, - color: const Color(0xFF140C10), - ), - color: CourseModuleModel(unitEntity?.courseModuleCode??'Phase-1').color, - borderRadius: BorderRadius.circular(6) - ), - padding: EdgeInsets.symmetric(horizontal: 10.w), - child: Text( - lessons?.name??'', - maxLines: 1, - style: TextStyle( - fontSize: 25.sp, - color: const Color(0xFF333333) - ), - ), - ) - ], - ), - ), - ); - } -} \ No newline at end of file diff --git a/lib/pages/section/widgets/section_item.dart b/lib/pages/section/widgets/section_item.dart new file mode 100644 index 0000000..1adb3f8 --- /dev/null +++ b/lib/pages/section/widgets/section_item.dart @@ -0,0 +1,106 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:wow_english/common/extension/string_extension.dart'; +import 'package:wow_english/common/widgets/ow_image_widget.dart'; + +import '../../../models/course_section_entity.dart'; +import '../../../models/course_unit_entity.dart'; +import '../courese_module_model.dart'; + +///环节item布局 +class SectionItem extends StatelessWidget { + const SectionItem({super.key, this.lessons, this.courseModuleId}); + + final String? courseModuleId; + final CourseSectionEntity? lessons; + + @override + Widget build(BuildContext context) { + return Padding( + padding: EdgeInsets.symmetric(horizontal: 12.w,vertical: 24.h), + child: Stack( + children: [ + _normalItem(), + _lockWidget(), + ], + ) + ); + } + + Widget _normalItem() { + return Container( + width: 165.w, + padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 24.h), + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage('gendubeij'.assetPng), + fit: BoxFit.fill + ), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Container( + decoration: BoxDecoration( + border: Border.all( + width: 2, + color: const Color(0xFF140C10), + ), + borderRadius: BorderRadius.circular(6) + ), + child: OwImageWidget( + name: lessons?.coverUrl??'', + fit: BoxFit.fitHeight, + ), + ) + ), + 24.verticalSpace, + Container( + decoration: BoxDecoration( + border: Border.all( + width: 2, + color: const Color(0xFF140C10), + ), + color: CourseModuleModel(courseModuleId ?? 'Phase-1').color, + borderRadius: BorderRadius.circular(6) + ), + padding: EdgeInsets.symmetric(horizontal: 10.w), + child: Text( + lessons?.name??'', + maxLines: 1, + style: TextStyle( + fontSize: 25.sp, + color: const Color(0xFF333333) + ), + ), + ) + ], + ), + ); + } + + ///锁定状态下蒙层视图 + Widget _lockWidget() { + return Visibility( + visible: lessons?.lock ?? false, + child: Container( + width: 165.w, + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage( + 'gendubeij_mengban'.assetPng + ), + fit: BoxFit.fill + ) + ), + alignment: Alignment.center, + // child: Image.asset( + // 'iv_lock'.assetPng, + // height: 36.h, + // width: 41.w, + // ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/pages/unit/view.dart b/lib/pages/unit/view.dart index fc6971c..bf82ee3 100644 --- a/lib/pages/unit/view.dart +++ b/lib/pages/unit/view.dart @@ -12,7 +12,7 @@ import '../../utils/toast_util.dart'; import 'bloc.dart'; import 'event.dart'; -// 课程列表页（多unit，参考口语星球的框或分割标志） +// 课程（单元）列表页（多unit，参考口语星球的框或分割标志） class UnitPage extends StatelessWidget { const UnitPage({super.key, this.courseModuleEntity}); @@ -57,7 +57,7 @@ class UnitPage extends StatelessWidget { return GestureDetector( onTap: () { if (data.lock == true) { - showToast('当前unit暂未解锁'); + showToast('当前课程暂未解锁'); return; } diff --git a/lib/pages/unit/widget/course_unit_item.dart b/lib/pages/unit/widget/course_unit_item.dart index 5428fc1..e47a09a 100644 --- a/lib/pages/unit/widget/course_unit_item.dart +++ b/lib/pages/unit/widget/course_unit_item.dart @@ -1,3 +1,4 @@ +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:wow_english/common/extension/string_extension.dart'; @@ -5,6 +6,7 @@ import 'package:wow_english/common/widgets/ow_image_widget.dart'; import '../../../models/course_unit_entity.dart'; +///课程（单元）item布局 class CourseUnitItem extends StatelessWidget { const CourseUnitItem( {super.key, required this.unitEntity, required this.unitLesson}); @@ -16,41 +18,74 @@ class CourseUnitItem extends StatelessWidget { Widget build(BuildContext context) { return Padding( padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 24.h), + child: Stack( + children: [ + _normalItem(), + _lockWidget(), + ], + ) + ); + } + + Widget _normalItem() { + return Container( + width: 165.w, + padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 24.h), + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage('gendubeij'.assetPng), fit: BoxFit.fill), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Container( + decoration: BoxDecoration( + border: Border.all( + width: 2, + color: const Color(0xFF140C10), + ), + borderRadius: BorderRadius.circular(6)), + child: OwImageWidget( + name: unitLesson.coverUrl ?? '', + fit: BoxFit.fitHeight, + ), + )), + 20.verticalSpace, + SizedBox( + height: 40.h, + child: Text( + unitLesson.name ?? '', + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: + TextStyle(fontSize: 11.sp, color: const Color(0xFF140C10)), + ), + ) + ], + ), + ); + } + + ///锁定状态下蒙层视图 + Widget _lockWidget() { + return Visibility( + visible: unitLesson.lock ?? false, child: Container( width: 165.w, - padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 24.h), decoration: BoxDecoration( - image: DecorationImage( - image: AssetImage('gendubeij'.assetPng), fit: BoxFit.fill), - ), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: Container( - decoration: BoxDecoration( - border: Border.all( - width: 2, - color: const Color(0xFF140C10), - ), - borderRadius: BorderRadius.circular(6)), - child: OwImageWidget( - name: unitLesson.coverUrl ?? '', - fit: BoxFit.fitHeight, - ), - )), - 20.verticalSpace, - SizedBox( - height: 40.h, - child: Text( - unitLesson.name ?? '', - maxLines: 2, - overflow: TextOverflow.ellipsis, - style: - TextStyle(fontSize: 11.sp, color: const Color(0xFF140C10)), - ), + image: DecorationImage( + image: AssetImage( + 'gendubeij_mengban'.assetPng + ), + fit: BoxFit.fill ) - ], + ), + alignment: Alignment.center, + child: Image.asset( + 'iv_lock'.assetPng, + height: 54.h, + width: 61.5.w, ), ), ); -- libgit2 0.22.2