dart 在Flutter中处理图像逻辑的问题

0yg35tkg  于 2023-10-13  发布在  Flutter
关注(0)|答案(1)|浏览(145)

我还在学习Flutter。
我用AssetImage()创建了一个默认水果列表的应用程序,用户可以用image_picker向其中添加图像。
我遇到的问题是,当我编辑项目的标题或描述并保持图像不变时,列表中的图像缩略图更改为默认的“no_image”,并且不保留原始图像。然后当我再次尝试编辑时,我遇到了对空值使用的空检查运算符。
代码如下:

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:training/logics.dart';
import '../models/images_instance.dart';

class AddEditImageData extends StatefulWidget {
  final int? index;

  const AddEditImageData({super.key, this.index});

  @override
  State<AddEditImageData> createState() => _AddEditImageDataState();
}

class _AddEditImageDataState extends State<AddEditImageData> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  Widget buildAvatar() {
    ImageProvider<Object>? imageProvider;

    if (selectedFileImage != null) {
      // Use selectedFileImage if available
      imageProvider = FileImage(selectedFileImage!);
    } else if (widget.index != null && widget.index! >= 0 && widget.index! < imagesInstances.length) {
      // Use AssetImage if index is valid
      imageProvider = AssetImage(imagesInstances[widget.index!].imageString!);
    } else {
      // Handle the case where neither selectedFileImage nor widget.index is available
      imageProvider = const AssetImage('assets/images/no_image.png');
    }

    return SizedBox(
      width: 120,
      height: 120,
      child: CircleAvatar(
        radius: 50,
        backgroundImage: imageProvider,
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    if (widget.index != null) {
      // Populate fields with existing data for editing
      final imageInstance = imagesInstances[widget.index!];
      imageTitleController.text = imageInstance.imageTitle ?? '';
      imageDescriptionController.text = imageInstance.imageDescription ?? '';
      selectedFileImage = imageInstance.imageFile;
    }
  }

  void resetFields() {
    imageTitleController.clear();
    imageDescriptionController.clear();
    selectedFileImage = null;
  }

  void navigateBack() {
    Navigator.pop(context); // Navigate back after saving
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text((widget.index != null) ? 'Edit Image' : 'Add New Image'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              const Text('Add Image Data'),
              const SizedBox(
                height: 10,
              ),
              Form(
                key: _formKey,
                child: Column(
                  children: [
                    const Text('Add Image'),
                    Row(
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            pickImage(ImageSource.gallery).then((pickedImage) {
                              if (pickedImage != null) {
                                setState(() {});
                              }
                            });
                          },
                          child: const Text('From Gallery'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            pickImage(ImageSource.camera).then((pickedImage) {
                              if (pickedImage != null) {
                                setState(() {});
                              }
                            });
                          },
                          child: const Text('From Camera'),
                        ),
                      ],
                    ),

                    buildAvatar(),
                    const SizedBox(
                      height: 10,
                    ),
                    const Text('Add Image Title'),
                    TextFormField(
                      controller: imageTitleController,
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    const Text('Add Image Description'),
                    TextFormField(
                      controller: imageDescriptionController,
                    ),
                  ],
                ),
              ),
              ElevatedButton(
                  onPressed: () {
                    if (widget.index != null) {
                      saveEditedItem(widget.index!);
                    } else {
                      addImageInstance(context);
                    }

                    Navigator.pop(context);
                  },
                  child: Text((widget.index != null)
                      ? 'Submit Edited Image Instance'
                      : 'Submit New Image Instance'))
            ],
          ),
        ));
  }
}

我的目标是能够添加,编辑和删除图像,和/或标题和/或描述,无论是在默认项目的图像类型“资产图像”,或在一个新添加的项目列表中的图像类型“文件”。
希望有人帮助解决这个问题

ffscu2ro

ffscu2ro1#

我已经检查了你的代码,@Ahmad Loutfy。请查看以下步骤,因为它们应该很有帮助。

  • 在编辑过程中,必须更新selectedFileImage,特别是在选择了新图像的情况下。
  • buildAvatar()函数中,确保selectedFileImage必须为null,AssetImage用作与默认“no_image”一致的选项。

相关问题