app-starlock/star_lock/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../app_settings/app_colors.dart';
import '../../../../tools/titleAppBar.dart';
import 'editVideoLog_logic.dart';

class EditVideoLogPage extends StatefulWidget {
  const EditVideoLogPage({Key? key}) : super(key: key);

  @override
  State<EditVideoLogPage> createState() => _EditVideoLogPageState();
}

class _EditVideoLogPageState extends State<EditVideoLogPage> {
  final logic = Get.put(EditVideoLogLogic());
  final state = Get.find<EditVideoLogLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: TitleAppBar(
        barTitle: "已选${state.seletVideoLog.value}项",
        haveBack: true,
        backgroundColor: AppColors.mainColor,
        actionsList: [
          TextButton(
            child: Text(
              "全选",
              style: TextStyle(color: Colors.white, fontSize: 24.sp),
            ),
            onPressed: () async {
              state.isSeletAll.value = !state.isSeletAll.value;
            },
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
                itemCount: 5,
                itemBuilder: (c, index) {
                  return Column(children: [
                    Container(
                        margin: EdgeInsets.only(left:20.w, top: 15.w, bottom: 15.w),
                        child: Row(
                            children: [
                              Text("2023.10.23", style: TextStyle(fontSize: 20.sp)),
                            ]
                        )),
                    mainListView(index)
                  ],);
                }),
          ),
          bottomBottomBtnWidget()
        ],
      ),
    );
  }

  var itemW = (1.sw - 15.w*4)/3;
  var itemH = (1.sw - 15.w*4)/3+40.h;
  Widget mainListView(int index){
    return Container(
      // margin: EdgeInsets.only(left: 10.w, right: 10.w, top: 40.h),
      // color: Colors.blue,
      child: GridView.builder(
        padding: EdgeInsets.only(left: 15.w, right: 15.w),
        itemCount: index+1,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
            crossAxisCount: 3,
            //纵轴间距
            mainAxisSpacing: 10.w,
            // 横轴间距
            crossAxisSpacing: 15.w,
            //子组件宽高长度比例
            childAspectRatio: itemW/itemH
        ),
        itemBuilder: (context, index) {
          return Obx(() => videoItem());
        },
      ),
    );
  }

  Widget videoItem(){
    return SizedBox(
      width: itemW,
      height: itemH,
      child: Stack(
        children: [
          Column(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(10.w),
                child: Image(width: itemW, height: itemW, fit: BoxFit.fill, image: const AssetImage("images/main/icon_lockDetail_monitoringvoiceFrist.png")),
              ),
              SizedBox(height:5.h),
              Text("2023.10.23 10:00", style: TextStyle(fontSize: 20.sp))
            ],
          ),
          Visibility(
            visible: true,
            child: Positioned(
                top: 0.w,
                right: 0.w,
                child: GestureDetector(
                    onTap: (){

                    },
                    child: Image(width: 40.w, height: 40.w, image: state.isSeletAll.value ? const AssetImage("images/icon_round_selet.png") : const AssetImage("images/icon_round_unSelet.png"))
                )
            ),
          )
        ],
      ),
    );
  }

  Widget bottomBottomBtnWidget(){
    return Container(
      width: 1.sw,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
          children: [
            bottomBtnItemWidget("images/main/icon_lockDetail_monitoringDownloadVideo.png", "下载", Colors.white,(){

            }),
            SizedBox(width:100.w),
            bottomBtnItemWidget("images/main/icon_lockDetail_monitoringDeletVideo.png", "删除", AppColors.mainColor,(){

            })
          ]),
    );
  }

  Widget bottomBtnItemWidget(String iconUrl, String name, Color backgroundColor, Function() onClick) {
    var wh = 40.w;
    return GestureDetector(
      onTap: onClick,
      child: Container(
          height: 140.h,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 30.w),
              Image.asset(iconUrl, width: wh, height: wh, fit: BoxFit.fitWidth),
              SizedBox(height: 10.w),
              Expanded(child: Text(name, style: TextStyle(fontSize: 22.sp), textAlign: TextAlign.center))
            ],
          )),
    );
  }

}