Clean/lib/module/people_photo/people_photo_view.dart

import 'dart:io';

import 'package:clean/base/base_page.dart';
import 'package:clean/data/bean/photos_type.dart';
import 'package:clean/module/image_picker/image_picker_util.dart';
import 'package:clean/module/people_photo/people_photo_controller.dart';
import 'package:clean/resource/assets.gen.dart';
import 'package:clean/router/app_pages.dart';
import 'package:flutter/Material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

import '../../utils/styles.dart';

class PeoplePhotoPage extends BasePage<PeoplePhotoController> {
  const PeoplePhotoPage({super.key});

  static start() {
    Get.toNamed(RoutePath.peoplePhoto, arguments: {});
  }

  @override
  bool statusBarDarkFont() {
    // TODO: implement statusBarDarkFont
    return false;
  }

  @override
  bool immersive() {
    // TODO: implement immersive
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(children: [
      PopScope(
        canPop: false,
        onPopInvokedWithResult: (didPop, result) {
          if (didPop) {
            return;
          }
          controller.clickBack();
        },
        child: Container(
          child: SafeArea(
            child: Obx(() {
              if (controller.photoGroups.isEmpty ||
                  controller.photoGroups[0].images.isEmpty) {
                return _noNoPicturesCard();
              }
              return Column(
                children: [
                  _titleCard(),
                  // Photo groups
                  Flexible(
                    child: Obx(() {
                      return ListView(
                        padding: EdgeInsets.symmetric(horizontal: 16.w),
                        children: [
                          ...controller.photoGroups.map((group) => Column(
                                children: [
                                  _buildPhotoGroup(
                                    images: group.images,
                                    title: "photo: ${group.images.length}",
                                    imageCount: group.images.length,
                                  ),
                                  SizedBox(height: 15.h),
                                ],
                              ))
                        ],
                      );
                    }),
                  ),
                  _bottomBarCard(),
                ],
              );
            }),
          ),
        ),
      ),
      IgnorePointer(
        child: Assets.images.bgHome.image(
          width: 360.w,
        ),
      ),
    ]);
  }

  Widget _titleCard() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 16.w, top: 14.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: controller.clickBack,
            child: Assets.images.iconBackArrow.image(
              width: 28.w,
              height: 28.h,
            ),
          ),
          (controller.photoGroups.isEmpty ||
                  controller.photoGroups[0].images.isEmpty)
              ? SizedBox()
              : Column(
                  children: [
                    SizedBox(height: 12.h),
                    Text(
                      'People Photos',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24.sp,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    SizedBox(height: 20.h),
                  ],
                )
        ],
      ),
    );
  }

  Widget _bottomBarCard() {
    return GestureDetector(
        onTap: () {
          controller.clickJumpSelect();
        },
        child: Container(
          width: 360.w,
          height: 81.h,
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          decoration: ShapeDecoration(
            color: Color(0xFF23232A),
            shape: RoundedRectangleBorder(
              side: BorderSide(
                  width: 1.w, color: Colors.white.withValues(alpha: 0.1)),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(14.r),
                topRight: Radius.circular(14.r),
              ),
            ),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Obx(() {
                return Text(
                  '${controller.selectedFileCount.value} files selected (${controller.selectedFilesSizeString})',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.9),
                    fontSize: 13.sp,
                    fontWeight: FontWeight.w500,
                  ),
                );
              }),
              GestureDetector(
                onTap: () {
                  controller.clickDelete();
                },
                child: Container(
                  width: 108.w,
                  height: 38.h,
                  decoration: ShapeDecoration(
                    color: Color(0xFF0279FB),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Text(
                        'Delete',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      Assets.images.iconDelete.image(
                        width: 18.w,
                        height: 18.h,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ));
  }

  Widget _buildPhotoGroup({
    required List<AssetEntity> images,
    required String title,
    required int imageCount,
  }) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      margin: EdgeInsets.only(top: 14.h),
      width: 328.w,
      height: imageCount < 5 ? 160.h : 230.h,
      decoration: ShapeDecoration(
        color: Colors.white.withValues(alpha: 0.12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(14.sp),
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
              GestureDetector(
                onTap: () => controller.toggleGroupSelection(images),
                child: Obx(() => Text(
                      controller.getGroupByImages(images).isSelected.value
                          ? 'Deselect All'
                          : 'Select All',
                      style: TextStyle(
                        color: Colors.white.withValues(alpha: 0.7),
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                      ),
                    )),
              ),
            ],
          ),
          SizedBox(
            height: imageCount < 3
                ? 70.h
                : imageCount <= 8
                    ? null
                    : 148.h,
            child: imageCount <= 8
                ? GridView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4,
                      mainAxisSpacing: 8.w,
                      crossAxisSpacing: 8.h,
                    ),
                    itemCount: imageCount,
                    itemBuilder: _buildPhotoItem(images),
                  )
                : GridView.builder(
                    scrollDirection: Axis.horizontal,
                    physics: BouncingScrollPhysics(),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      mainAxisSpacing: 8.w,
                      crossAxisSpacing: 8.h,
                      childAspectRatio: 1,
                    ),
                    itemCount: imageCount,
                    itemBuilder: _buildPhotoItem(images),
                  ),
          ),
        ],
      ),
    );
  }

  Widget Function(BuildContext, int) _buildPhotoItem(
          List<AssetEntity> images) =>
      (context, index) {
        final group = controller.getGroupByImages(images);

        final assetEntity = group.images[index];

        return GestureDetector(
          onTap: () {
            controller.clickImage(images, index, PhotosType.peoplePhotos);
            print("点击图片");
          },
          child: Obx(() {
            final isSelected = group.selectedImages[index];
            return Stack(
              children: [
                Container(
                  width: 70.w,
                  height: 70.w,
                  decoration: ShapeDecoration(
                    color: Colors.white.withValues(alpha: 0.12),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(9.27.sp),
                    ),
                  ),
                  child: ClipRRect(
                      borderRadius: BorderRadius.circular(9.27.sp),
                      child: AssetEntityImage(assetEntity,
                          thumbnailSize: const ThumbnailSize.square(300),
                          isOriginal: false,
                          fit: BoxFit.cover,
                          frameBuilder: Styles.customFrameBuilder(
                            opacity: 0.22,
                            width: 80.w,
                            height: 80.w,
                          ))),
                ),
                Positioned(
                    right: 6.w,
                    bottom: 6.h,
                    child: GestureDetector(
                      onTap: () {
                        controller.toggleImageSelection(images, index);
                      },
                      child: Container(
                        child: isSelected
                            ? Center(
                                child: Assets.images.iconSelected.image(
                                  width: 20.w,
                                  height: 20.h,
                                ),
                              )
                            : Center(
                                child: Assets.images.iconUnselected.image(
                                width: 20.w,
                                height: 20.h,
                              )),
                      ),
                    )),
              ],
            );
          }),
        );
      };

  Widget _noNoPicturesCard() {
    return Column(
      // mainAxisAlignment: MainAxisAlignment.start,
      children: [
        _titleCard(),
        Spacer(flex: 1),
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 70.w,
              height: 70.h,
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(),
              child: Assets.images.iconNoPictures.image(),
            ),
            SizedBox(height: 22.h),
            Text(
              'No pictures found',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            SizedBox(height: 12.h),
            Text(
              'No pictures available at the moment',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white.withValues(alpha: 0.6),
                fontSize: 14.sp,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
        Spacer(
          flex: 3,
        ),
      ],
    );
  }
}