fis_lib_report/lib/pages/components/input_image.dart

import 'package:fis_lib_report/converts/alignment_convert.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/inputImage.dart';
import 'package:fis_lib_report/report/inputImageList.dart';
import 'package:fis_lib_report/report_info/input_image_info.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 RInputImage extends StatefulWidget {
  final InputImage inputImage;

  RInputImage(this.inputImage);
  @override
  State<StatefulWidget> createState() {
    return _RInputImageState();
  }
}

class _RInputImageState extends State<RInputImage> {
  late final InputImage inputImage;
  InputImageInfo? inputImageInfo;
  _RInputImageState();
  Color _borderColor = Colors.grey;
  bool _isSelected = false;
  bool _hasImageBorder = false;
  String _imageUrl = '';

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

  @override
  initState() {
    inputImage = widget.inputImage;
    _hasImageBorder = inputImage.hasImageBorder!;

    final element = ReportInfo.instance.getElementInfo(inputImage);
    if (element != null) {
      inputImageInfo = element as InputImageInfo;
      inputImageInfo!.onSelect!.addListener((sender, e) {
        setState(() {
          if (_imageUrl != e) {
            _imageUrl = e;
            _child = _getChild();
          } else {
            _imageUrl = '';
            _child = const Text('请点击此处后选择右侧图片');
          }
        });
      });
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(
        onTap: () {
          if (_isSelected) {
            setState(() {
              _borderColor = Colors.grey;
              _isSelected = false;
              _hasImageBorder = false;
              if (inputImageInfo != null) {
                inputImageInfo!.isSelected = false;
              }
            });
          } else {
            setState(() {
              _borderColor = const Color.fromARGB(255, 64, 159, 248);
              _isSelected = true;
              _hasImageBorder = true;
              if (inputImageInfo != null) {
                inputImageInfo!.isSelected = true;
              }
            });
          }
        },
        child: Row(
          mainAxisAlignment: AlignmentConvert.horizontalToMainConvert(
              inputImage.horizontalAlignment),
          children: [
            Container(
              padding: const EdgeInsets.all(3),
              height: PtToPxConverter.ptToPx(inputImage.imageHeight!) + 6,
              width: PtToPxConverter.ptToPx(inputImage.imageWidth!) + 6,
              alignment: Alignment.center,
              margin: MarginConvert.marginConvert(inputImage.margin),
              decoration: BoxDecoration(
                  border: _hasImageBorder
                      ? Border.all(
                          width: 0.5,
                          color: _borderColor,
                        )
                      : null,
                  color: Colors.transparent),
              child: _child,
            ),
          ],
        ),
      ),
    );
  }

  Widget _getChild() {
    if (_imageUrl.isNotEmpty) {
      return VidImageView.network(
        _imageUrl,
        fit: BoxFit.fill,
        height: PtToPxConverter.ptToPx(inputImage.imageHeight!),
        width: PtToPxConverter.ptToPx(inputImage.imageWidth!),
      );
    }
    return const Text('请点击此处后选择右侧图片');
  }
}