fis_lib_report/lib/pages/components/input_imageList.dart

import 'package:fis_lib_report/converts/margin_convert.dart';
import 'package:fis_lib_report/converts/pt_to_px_converter.dart';
import 'package:fis_lib_report/pages/components/vid_image.dart';
import 'package:fis_lib_report/pages/helpler.dart';
import 'package:fis_lib_report/report/inputImageList.dart';
import 'package:fis_lib_report/report_info/input_image_list_info.dart';
import 'package:fis_lib_report/report_info/report_info.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RInputImageList extends StatefulWidget {
  final InputImageList inputImageList;

  RInputImageList(this.inputImageList);
  @override
  State<StatefulWidget> createState() {
    return _RInputImageListState();
  }
}

class _RInputImageListState extends State<RInputImageList> {
  InputImageList? inputImageList;
  InputImageListInfo? inputImageListInfo;
  Color _borderColor = Colors.grey;
  bool _isSelected = false;
  final List<String> _images = [];
  double _height = 0.0;

  Widget _child = const Text('请点击此处后选择图片');

  @override
  initState() {
    _initDatas();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if (inputImageListInfo != null) {
      final imageInfo = ReportInfo.instance
          .getBlockElement(widget.inputImageList) as InputImageListInfo;
      if (imageInfo != inputImageListInfo) {
        inputImageListInfo = imageInfo;
        setState(() {
          _images.clear();
          _isSelected = false;
          _child = _getChild();
        });
        inputImageListInfo!.onSelect!.addListener((sender, e) {
          setState(() {
            if (_images.contains(e)) {
              _images.remove(e);
              inputImageListInfo!.selectedImages.remove(e);
            } else {
              _images.add(e);
              inputImageListInfo!.selectedImages.add(e);
            }
            _child = _getChild();
          });
        });
      }
    }
    return SizedBox(
      width: PtToPxConverter.ptToPx(
          inputImageList!.imageWidth! * inputImageList!.column!),
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          onTap: () {
            if (_isSelected) {
              setState(() {
                _borderColor = Colors.grey;
                _isSelected = false;
                inputImageListInfo!.isSelected = false;
              });
            } else {
              setState(() {
                _borderColor = const Color.fromARGB(255, 64, 159, 248);
                _isSelected = true;
                inputImageListInfo!.isSelected = true;
              });
            }
          },
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 3),
            height: _height,
            width: PtToPxConverter.ptToPx(
                inputImageList!.imageWidth! * inputImageList!.column!),
            alignment: Alignment.center,
            margin: MarginConvert.marginConvert(inputImageList!.margin),
            decoration: BoxDecoration(
                border: _isSelected
                    ? Border.all(
                        width: 0.5,
                        color: _borderColor,
                      )
                    : null,
                color: Colors.transparent),
            child: _child,
          ),
        ),
      ),
    );
  }

  Widget _getChild() {
    if (_images.isNotEmpty) {
      final rowCount = (_images.length / inputImageList!.column!).ceil();
      _height = rowCount *
              (PtToPxConverter.ptToPx(inputImageList!.imageHeight!) + 3) +
          6;
      return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: inputImageList!.column!,
          crossAxisSpacing: 5,
          mainAxisSpacing: 5,
          childAspectRatio:
              inputImageList!.imageWidth! / inputImageList!.imageHeight!,
        ),
        itemCount: _images.length,
        itemBuilder: (BuildContext context, int index) {
          return VidImageView.network(
            _images[index],
            fit: BoxFit.fill,
            width: PtToPxConverter.ptToPx(inputImageList!.imageWidth!) - 20,
          );
        },
      );
    } else {
      _height = PtToPxConverter.ptToPx(inputImageList!.imageHeight!) + 9;
    }

    return const Text('请点击此处后选择图片');
  }

  @override
  void dispose() {
    inputImageListInfo!.onSelect!.dispose();
    super.dispose();
  }

  void _initDatas() {
    inputImageList = widget.inputImageList;
    _height = PtToPxConverter.ptToPx(inputImageList!.imageHeight) + 6;
    final element = ReportInfo.instance.getBlockElement(inputImageList!);
    if (element != null) {
      inputImageListInfo = element as InputImageListInfo;
      inputImageListInfo!.onSelect!.addListener((sender, e) {
        setState(() {
          if (_images.contains(e)) {
            _images.remove(e);
            inputImageListInfo!.selectedImages.remove(e);
          } else {
            _images.add(e);
            inputImageListInfo!.selectedImages.add(e);
          }
          _child = _getChild();
        });
      });
    }
  }
}