phtoto_selected_preview_view.dart 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. import 'package:clean/base/base_page.dart';
  2. import 'package:clean/data/bean/photos_type.dart';
  3. import 'package:clean/module/photo_preview/photo_selected_preview_controller.dart';
  4. import 'package:clean/resource/assets.gen.dart';
  5. import 'package:clean/router/app_pages.dart';
  6. import 'package:flutter/Material.dart';
  7. import 'package:flutter_screenutil/flutter_screenutil.dart';
  8. import 'package:get/get_core/src/get_main.dart';
  9. import 'package:lottie/lottie.dart';
  10. import 'package:wechat_assets_picker/wechat_assets_picker.dart';
  11. import 'package:get/get.dart';
  12. class PhotoSelectedPreviewPage
  13. extends BasePage<PhotoSelectedPreviewController> {
  14. const PhotoSelectedPreviewPage({super.key});
  15. static void start(PhotosType photosType, Set<String> selectedIds) {
  16. Get.toNamed(RoutePath.photoSelectedPreview, arguments: {
  17. "photosType": photosType,
  18. "selectedIds": selectedIds,
  19. });
  20. }
  21. @override
  22. bool statusBarDarkFont() {
  23. return false;
  24. }
  25. @override
  26. bool immersive() {
  27. return true;
  28. }
  29. @override
  30. Widget buildBody(BuildContext context) {
  31. return Stack(children: [
  32. PopScope(
  33. canPop: false,
  34. onPopInvokedWithResult: (didPop, result) {
  35. if (didPop) {
  36. return;
  37. }
  38. controller.clickBack();
  39. },
  40. child: Container(
  41. child: SafeArea(
  42. child: Obx(() {
  43. if (controller.photoGroups.isEmpty ||
  44. controller.photoGroups[0].images.isEmpty) {
  45. return _noNoPicturesCard();
  46. }else if (controller.isKeepAll.value) {
  47. return _finishCleanCard();
  48. }
  49. return Column(
  50. children: [
  51. _titleCard(),
  52. Flexible(
  53. child: Obx(() {
  54. return SizedBox(
  55. child: GridView.builder(
  56. padding: EdgeInsets.symmetric(horizontal: 16.w),
  57. scrollDirection: Axis.vertical,
  58. // 设置为垂直方向滚动
  59. physics: BouncingScrollPhysics(),
  60. gridDelegate:
  61. SliverGridDelegateWithFixedCrossAxisCount(
  62. crossAxisCount: 3, // 每行显示 2 个元素
  63. mainAxisSpacing: 8.w, // 垂直间距
  64. crossAxisSpacing: 8.h, // 水平间距
  65. ),
  66. itemCount:
  67. controller.photoGroups[0].images.length,
  68. itemBuilder: _buildPhotoItem(
  69. controller.photoGroups[0].images)),
  70. );
  71. }),
  72. ),
  73. Obx(() {
  74. if (controller.photoGroups.isNotEmpty ||
  75. controller.photoGroups[0].images.isNotEmpty) {
  76. return _bottomBarCard();
  77. } else {
  78. return SizedBox();
  79. }
  80. }),
  81. SizedBox(height: 8.h),
  82. ],
  83. );
  84. }),
  85. ),
  86. )),
  87. Obx(() {
  88. if (controller.isKeepAll.value) {
  89. return IgnorePointer(
  90. child: Assets.images.bgPhotoSelectedPreviewFinish.image(
  91. width: 360.w,
  92. ),
  93. );
  94. } else {
  95. return IgnorePointer(
  96. child: Assets.images.bgHome.image(
  97. width: 360.w,
  98. ),
  99. );
  100. }
  101. }),
  102. ]);
  103. }
  104. Widget _titleCard() {
  105. return Container(
  106. alignment: Alignment.centerLeft,
  107. padding:
  108. EdgeInsets.only(left: 16.w, top: 14.h, right: 16.w, bottom: 20.h),
  109. child: Column(
  110. crossAxisAlignment: CrossAxisAlignment.start,
  111. children: [
  112. Obx(() {
  113. return Row(
  114. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  115. children: [
  116. GestureDetector(
  117. onTap: () => controller.clickBack(),
  118. child: Assets.images.iconBackArrow.image(
  119. width: 28.w,
  120. height: 28.h,
  121. ),
  122. ),
  123. // 如果photoGroup数据为空,不显示全选按钮
  124. controller.photoGroups.isEmpty ||
  125. controller.photoGroups[0].images.isEmpty
  126. ? Container()
  127. : GestureDetector(
  128. onTap: () => controller.toggleGroupSelection(
  129. controller.photoGroups[0].images),
  130. child: Obx(() => Text(
  131. controller
  132. .getGroupByImages(
  133. controller.photoGroups[0].images)
  134. .isSelected
  135. .value
  136. ? 'Deselect All'
  137. : 'Select All',
  138. style: TextStyle(
  139. color: Colors.white.withValues(alpha: 0.7),
  140. fontSize: 14.sp,
  141. fontWeight: FontWeight.w400,
  142. ),
  143. )),
  144. ),
  145. ],
  146. );
  147. }),
  148. ],
  149. ),
  150. );
  151. }
  152. Widget _bottomBarCard() {
  153. return GestureDetector(
  154. onTap: () {
  155. controller.clickDelete();
  156. },
  157. child: Container(
  158. width: 328.w,
  159. height: 48.h,
  160. decoration: ShapeDecoration(
  161. color: Color(0xFF0279FB),
  162. shape: RoundedRectangleBorder(
  163. borderRadius: BorderRadius.circular(10.r),
  164. ),
  165. ),
  166. padding: EdgeInsets.symmetric(horizontal: 16.w),
  167. child: Row(
  168. mainAxisAlignment: MainAxisAlignment.center,
  169. children: [
  170. Assets.images.iconDelete.image(
  171. width: 18.w,
  172. height: 18.h,
  173. ),
  174. SizedBox(width: 5.w),
  175. Obx(() {
  176. if (controller.selectedPhotosIds.isNotEmpty) {
  177. return Text(
  178. 'delete ${controller.selectedFilesSizeString}',
  179. textAlign: TextAlign.center,
  180. style: TextStyle(
  181. color: Colors.white,
  182. fontSize: 16.sp,
  183. fontWeight: FontWeight.w500,
  184. ),
  185. );
  186. } else {
  187. return Text(
  188. 'Keep All',
  189. textAlign: TextAlign.center,
  190. style: TextStyle(
  191. color: Colors.white,
  192. fontSize: 16.sp,
  193. fontWeight: FontWeight.w500,
  194. ),
  195. );
  196. }
  197. }),
  198. ],
  199. ),
  200. ));
  201. }
  202. Widget Function(BuildContext, int) _buildPhotoItem(
  203. List<AssetEntity> images) =>
  204. (context, index) {
  205. final group =
  206. controller.getGroupByImages(controller.photoGroups[0].images);
  207. return GestureDetector(
  208. onTap: () =>
  209. controller.clickImage(images, index, controller.photosType),
  210. child: Obx(() {
  211. var isSelected = group.selectedImages[index];
  212. return Stack(
  213. children: [
  214. Container(
  215. width: 104.w,
  216. height: 104.w,
  217. decoration: ShapeDecoration(
  218. color: Colors.white.withValues(alpha: 0.12),
  219. shape: RoundedRectangleBorder(
  220. borderRadius: BorderRadius.circular(9.27.sp),
  221. ),
  222. image: DecorationImage(
  223. image: AssetEntityImageProvider(
  224. group.images[index],
  225. thumbnailSize: const ThumbnailSize.square(300),
  226. isOriginal: false,
  227. ),
  228. fit: BoxFit.cover,
  229. ),
  230. ),
  231. ),
  232. Positioned(
  233. right: 8.w,
  234. bottom: 8.h,
  235. child: GestureDetector(
  236. onTap: () =>
  237. controller.toggleImageSelection(images, index),
  238. child: Container(
  239. child: isSelected
  240. ? Center(
  241. child: Assets.images.iconSelected.image(
  242. width: 20.w,
  243. height: 20.h,
  244. ),
  245. )
  246. : Center(
  247. child: Assets.images.iconUnselected.image(
  248. width: 20.w,
  249. height: 20.h,
  250. )),
  251. )),
  252. ),
  253. ],
  254. );
  255. }),
  256. );
  257. };
  258. Widget _noNoPicturesCard() {
  259. return Column(
  260. mainAxisAlignment: MainAxisAlignment.start,
  261. children: [
  262. _titleCard(),
  263. SizedBox(height: 170.h),
  264. Column(
  265. mainAxisAlignment: MainAxisAlignment.center,
  266. crossAxisAlignment: CrossAxisAlignment.center,
  267. children: [
  268. Container(
  269. width: 70.w,
  270. height: 70.h,
  271. clipBehavior: Clip.antiAlias,
  272. decoration: BoxDecoration(),
  273. child: Assets.images.iconNoPictures.image(),
  274. ),
  275. SizedBox(height: 22.h),
  276. Text(
  277. 'No pictures found',
  278. textAlign: TextAlign.center,
  279. style: TextStyle(
  280. color: Colors.white,
  281. fontSize: 20.sp,
  282. fontWeight: FontWeight.w700,
  283. ),
  284. ),
  285. SizedBox(height: 12.h),
  286. Text(
  287. 'No pictures available at the moment',
  288. textAlign: TextAlign.center,
  289. style: TextStyle(
  290. color: Colors.white.withValues(alpha: 0.6),
  291. fontSize: 14.sp,
  292. fontWeight: FontWeight.w400,
  293. ),
  294. ),
  295. ],
  296. ),
  297. ],
  298. );
  299. }
  300. Widget _finishCleanCard() {
  301. return Container(
  302. width: 360.w,
  303. child: Column(
  304. mainAxisAlignment: MainAxisAlignment.start,
  305. children: [
  306. Spacer(
  307. flex: 3,
  308. ),
  309. Text(
  310. 'Great!',
  311. textAlign: TextAlign.center,
  312. style: TextStyle(
  313. color: Colors.white,
  314. fontSize: 32.sp,
  315. fontWeight: FontWeight.w700,
  316. ),
  317. ),
  318. SizedBox(height: 14.h),
  319. Text(
  320. "You've completed 1 photo review",
  321. textAlign: TextAlign.center,
  322. style: TextStyle(
  323. color: Colors.white.withValues(alpha: 0.8),
  324. fontSize: 16.sp,
  325. fontWeight: FontWeight.w400,
  326. ),
  327. ),
  328. SizedBox(height: 47.h),
  329. // Assets.images.iconPhotoSelectedPreviewFireworks.image(
  330. // width: 158.w,
  331. // height: 158.h,
  332. // ),
  333. SizedBox(
  334. child: Lottie.asset(
  335. Assets.anim.animPhotoSelectedPreviewFireworks,
  336. width: 158.w,
  337. height: 158.w,
  338. repeat: false,
  339. )),
  340. Spacer(
  341. flex: 5,
  342. ),
  343. ],
  344. ),
  345. );
  346. }
  347. }