Question

我有一个页面称为BSP_LICENSE_PAGE和BUSINESS DETAILS页面，因此在这里我要在BSP_LICENSE_PAGE上上传图像，并且在该页面上载图像后将其转到BUSINESS_DETAIL页面，在此页面上我正在显示该图像。上方有一个笔（编辑）按钮，它将重定向我到BSP_LICENSE_PAGE，因此当我尝试编辑图像时，它将不会被编辑或不会被删除。

我在这里附加屏幕输出：

这是 BSP_LICENSED_PAGE

的代码

在此代码中，条件是否为编辑条件，否则为新图像上传条件

我正在将图像存储在MODEL类中

  Widget _buildbusinesslicensepicture() {
    if (widget.bspSignupCommonModel.licensed != null) {
      int keyValue = _bspLicenseImages.length;
      return GridView.count(
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        crossAxisCount: 5,
        childAspectRatio: 1,
        children: List.generate(
            widget.bspSignupCommonModel.licensed[0].bspLicenseImages.length,
            (index) {
          return Card(
            clipBehavior: Clip.antiAlias,
            child: Stack(
              children: <Widget>[
                Image.file(
                  widget.bspSignupCommonModel.licensed[0]
                      .bspLicenseImages[index].imageFile,
                  width: 500,
                  height: 500,
                ),
                Positioned(
                  right: 5,
                  top: 5,
                  child: InkWell(
                    child: Icon(
                      Icons.remove_circle,
                      size: 20,
                      color: Colors.red,
                    ),
                    onTap: () {
                      setState(() {
                        images.replaceRange(
                            widget.bspSignupCommonModel.licensed[index]
                                .bspLicenseImages.length,
                            widget.bspSignupCommonModel.licensed[index]
                                    .bspLicenseImages.length +
                                1,
                            ['Add Image']);
                      });
                    },
                  ),
                ),
              ],
            ),
          );
        }),
      );
    } else {
      return GridView.count(
        shrinkWrap: true,
        crossAxisCount: 5,
        childAspectRatio: 1,
        children: List.generate(images.length, (index) {
          if (images[index] is ImageUploadModel) {
            ImageUploadModel uploadModel = images[index];

            return Card(
              clipBehavior: Clip.antiAlias,
              child: Stack(
                children: <Widget>[
                  Image.file(
                    uploadModel.imageFile,
                    width: 300,
                    height: 300,
                  ),
                  Positioned(
                    right: 5,
                    top: 5,
                    child: InkWell(
                      child: Icon(
                        Icons.remove_circle,
                        size: 20,
                        color: Colors.red,
                      ),
                      onTap: () {
                        setState(() {
                          images.replaceRange(index, index + 1, ['Add Image']);
                        });
                      },
                    ),
                  ),
                ],
              ),
            );
          } else {
            return Card(
              child: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  _openImagePickerModal(context, index);
                },
              ),
            );
          }
        }),
      );
    }
  }

  void _getImage(BuildContext context, int index, ImageSource source) async {
    Future<File> imagee = ImagePicker.pickImage(source: source);
    imagee.then((file) {
      if (file != null) {
        setState(() {
          _imageFile = imagee;
          getFileImage(index);
        });
      }
    });

    Navigator.pop(context);
  }

  void _openImagePickerModal(BuildContext context, int index) {
    print('Image Picker Modal Called');
    showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        builder: (BuildContext context) {
          return Container(
            decoration: new BoxDecoration(
                color: Colors.white,
                borderRadius: new BorderRadius.only(
                    topLeft: const Radius.circular(40.0),
                    topRight: const Radius.circular(40.0))),
            height: 150.0,
            padding: EdgeInsets.all(10.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Pick an image',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  height: 20.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    ClipOval(
                      child: Material(
                        color: colorStyles["primary"], // button color
                        child: InkWell(
                          splashColor: Colors.red, // inkwell color
                          child: SizedBox(
                              width: 56,
                              height: 56,
                              child: Icon(FontAwesomeIcons.image)),
                          onTap: () {
                            _getImage(context, index, ImageSource.gallery);
                          },
                        ),
                      ),
                    ),
                    ClipOval(
                      child: Material(
                        color: colorStyles["primary"], // button color
                        child: InkWell(
                          splashColor: Colors.red, // inkwell color
                          child: SizedBox(
                              width: 56,
                              height: 56,
                              child: Icon(FontAwesomeIcons.camera)),
                          onTap: () {
                            _getImage(context, index, ImageSource.camera);
                          },
                        ),
                      ),
                    ),
                    // FlatButton(
                    //   color: Colors.red,
                    //   textColor: flatButtonColor,
                    //   child: Text('Use Camera'),
                    //   onPressed: () {
                    //     _getImage(context, index, ImageSource.camera);
                    //   },
                    // ),
                    // FlatButton(
                    //   color: Colors.red,
                    //   textColor: flatButtonColor,
                    //   child: Text('Use Gallery'),
                    //   onPressed: () {
                    //     _getImage(context, index, ImageSource.gallery);
                    //   },
                    // ),
                  ],
                ),
              ],
            ),
          );
        });
  }

  void getFileImage(int index) async {
    _imageFile.then((file) async {
      BusinessProfilePicture bspLicenseImage = new BusinessProfilePicture();
      bspLicenseImage.imageFile = file;
      bspLicenseImage.imageUrl = '';
      _bspLicenseImages.add(bspLicenseImage);
      setState(() {
        ImageUploadModel imageUpload = new ImageUploadModel();
        imageUpload.isUploaded = false;
        imageUpload.uploading = false;
        imageUpload.imageFile = file;
        imageUpload.imageUrl = '';
        images.replaceRange(index, index + 1, [imageUpload]);
      });
    });
  }

Answer 1

为了展示您想要实现的目标，我做了一个简单的例子。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? _image = null;
  late final _picker = ImagePicker();

  Future getImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);

    setState(
      () {
        if (image != null) {
          _image = File(image.path);
        } else {
          print('No image selected.');
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Image Picker Example'),
      ),
      body: new Center(
        child: _image == null
            ? new IconButton(
                icon: Icon(Icons.add_box_outlined),
                color: Colors.blue,
                iconSize: 100.0,
                onPressed: () {
                  getImage();
                },
              )
            : Stack(
                children: <Widget>[
                  Container(
                    width: 250.0,
                    height: 320.0,
                    child: new Image.file(_image!),
                  ),
                  Positioned(
                    right: 5.0,
                    child: InkWell(
                      child: Icon(
                        Icons.remove_circle,
                        size: 30,
                        color: Colors.red,
                      ),
                      // This is where the _image value sets to null on tap of the red circle icon
                      onTap: () {
                        setState(
                          () {
                            _image = null;
                          },
                        );
                      },
                    ),
                  )
                ],
              ),
      ),
    );
  }
}

在示例中，上传的图片通过点击红色圆圈图标停止显示或删除，将文件设置为空：

 onTap: () {
   setState(
     () {
       _image = null;
     },
   );
 },

在你的情况下，它可能是这样的：

 onTap: () {
   setState(
     () {
       imagee = null;
     },
   );
 },

在flutter中上传图片后如何编辑或删除图片

1 个答案: