图像应仅上传该列，而该列并非全部单击

Question

我编写了一个在Gridviw中有柱状的代码，每列都有可以上传图像的属性。 该图像将上传到该列上的单击，但在我单击任何列以上传图像上传的代码中，它都在所有列中上传。 因此，我想在点击的特定列上上传图像。

所以请帮助我这样做。

这是我的代码： -

import 'package:flutter/material.dart';
import 'package:mindmatch/utils/widget_functions.dart';
import 'package:mindmatch/custom/BorderIcon.dart';
import 'package:mindmatch/screens/Relation.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;
import 'dart:io';

class Photos extends StatefulWidget {
 var usrid;

 Photos({Key? key, @required this.usrid}) : super(key: key);

 @override
 _Photos createState() => _Photos();
 }

 class _Photos extends State<Photos>{

 PickedFile? _imageFile;
 final String uploadUrl = 'https://api.imgur.com/3/upload';
 final ImagePicker _picker = ImagePicker();

 Future<String?> uploadImage(filepath, url) async {
 var request = http.MultipartRequest('POST', Uri.parse(url));
 request.files.add(await http.MultipartFile.fromPath('image', filepath));
 var res = await request.send();
  return res.reasonPhrase;
}

Future<void> retriveLostData() async {
 final LostData response = await _picker.getLostData();
 if (response.isEmpty) {
  return;
}
if (response.file != null) {
  setState(() {
    _imageFile = response.file;
  });
} else {
  print('Retrieve error ${response.exception?.code}');
}
}

int counter = 0;
//List<Widget> _list = List<Widget>();
List<Widget> _list = <Widget> [];


@override
 void initState() {

 for (int i = 0; i < 2; i++) {
  Widget child = _newItem(i);
  _list.add(child);
 };
}

void on_Clicked() {
 Widget child = _newItem(counter);
  setState(
      () => _list.add(child),
 );
}

Widget _previewImage(i) {
 final _imageFile = this._imageFile;
 if (_imageFile != null) {
  return
    SizedBox(
      //width: 300,
      height: 100,
      child: Center(child:
      ClipRRect(
        borderRadius: BorderRadius.circular(8.0),
        child: Image.file(
          File(
            _imageFile.path,
          ),
          height: 80,
        )
      ),

      ),
    );

} else {
  return InkWell(
    onTap: _pickImage,
    child: SizedBox(
      //width: 300,
      height: 100,
      child: Center(child:
      Icon(
        Icons.image,
        color: Color(0xffcccccc),
        size: 60,
      ),

      ),
    ),
  );
}
}

Widget _newItem(int i) {
Key key = new Key('item_${i}');
Column child = Column(
    key: key,
    children: [
      Stack(
          children:  [
            Card(
              elevation: 0,
              shape: RoundedRectangleBorder(
                side: BorderSide(
                  color: Color(0xffa1a1a1),
                ),
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              child: _previewImage(i),
            ),
            Positioned(
              top: 9,
              right: 9,
              child: InkWell(
                onTap: () => _removeItem(i),
                child: SvgPicture.asset(
                  width: 20,
                  'assets/images/close.svg',
                  height: 20,
                ),
              ),
            )
          ]
      ),
    ]
);
counter++;
return child;
}

void _removeItem(int i) {
 print("====remove $i");

 print('===Removing $i');
setState(() => _list.removeAt(i));
}

void _pickImage() async {
 try {
  final pickedFile = await _picker.getImage(source: ImageSource.gallery);
  setState(() {
    _imageFile = pickedFile;
  });
} catch (e) {
  //print("Image picker error ${e!}");
  print("Image picker error");
}
}


@override
 Widget build(BuildContext context) {
 final Size size = MediaQuery.of(context).size;
 final ThemeData themeData = Theme.of(context);
 final double padding = 25;
 final sidePadding = EdgeInsets.symmetric(horizontal: padding);
 var regID = widget.usrid;

 return Theme(
  data: ThemeData().copyWith(
      dividerColor: Colors.transparent,
      backgroundColor: Colors.transparent
  ),
  child: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: Builder(
          builder: (BuildContext context) {
            return Padding(padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
              child: IconButton(
                icon: const Icon(
                  Icons.arrow_back_ios_outlined,
                  color: Colors.black,
                ),
                onPressed: () { Navigator.pop(context); },
              ),
            );
          },
        ),
      ),
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  //colors: const [Color.fromRGBO(132,105,211,1), Color.fromRGBO(93,181,233,1), Color.fromRGBO(86,129,233,1)],
                  colors: [Colors.white, Colors.white]
              ),
            ),
            width: size.width,
            height: size.height,
            child: Stack(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    addVerticalSpace(10),
                    Padding(
                      padding: sidePadding,
                      child: const Text(
                        'Add Your Photos',
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 20,
                        ),),
                    ),
                    addVerticalSpace(30),
                    Expanded(
                        child: Padding(
                          padding: sidePadding,
                          child: Column(
                            children: [
                              Expanded(
                                  child: GridView(
                                    //padding: const EdgeInsets.all(8.0),
                                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 3,
                                      crossAxisSpacing: 10.0,
                                      mainAxisSpacing: 15,
                                      //childAspectRatio: 2/1,
                                      ),
                                      // children: List.generate(_list.length, (index) {
                                      //         //generating tiles with people from list
                                      //         return _newItem(index);
                                      // },
                                      // ),
                                    children: List.generate(_list.length + 1,
                                            (index) => index == _list.length ?
                                        InkWell(
                                          onTap: () => on_Clicked(),
                                          child: Column(
                                              children: [
                                                Stack(
                                                    children: const [
                                                      Card(
                                                        elevation: 0,
                                                        color: Color(0xff8f9df2),
                                                        shape: RoundedRectangleBorder(
                                                          side: BorderSide(
                                                            color: Color(0xff8f9df2),
                                                          ),
                                                          borderRadius: BorderRadius.all(Radius.circular(12)),
                                                        ),
                                                        child: SizedBox(
                                                          //width: 300,
                                                          height: 100,
                                                          child: Center(child:
                                                          Icon(
                                                            Icons.add,
                                                            color: Colors.white,
                                                            size: 80.0,
                                                          ),

                                                          ),
                                                        ),

                                                      )
                                                    ]
                                                ),
                                              ]
                                          ),
                                        ) :
                                        _newItem(index)),
                                  )
                              )
                            ],
                          ),
                        )
                    ),
                  ],
                ),
              ],
            )
        ),
      ),
      persistentFooterButtons:[
        Padding(
          padding: EdgeInsets.fromLTRB(18, 0, 18, 0),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children:[
                ElevatedButton.icon(   // <-- ElevatedButton
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  icon: const Icon(
                    Icons.arrow_back_ios_outlined,
                    size: 15.0,
                    color:Colors.white,
                  ),
                  label: const Text(
                    'Back',
                    style: TextStyle(
                      fontSize: 20,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                      primary: Color(0xffFDA766),
                      minimumSize: const Size(100, 49),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0),)
                  ),
                ),
                Directionality(
                  textDirection: TextDirection.rtl,
                  child: ElevatedButton.icon(   // <-- ElevatedButton
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => Relation(usrid:regID)),
                      );
                    },
                    icon: const Icon(
                      Icons.arrow_back_ios_outlined,
                      size: 15.0,
                      color:Colors.white,
                    ),
                    label: const Text(
                      'Next',
                      style: TextStyle(
                        fontSize: 20,
                      ),
                    ),
                    style: ElevatedButton.styleFrom(
                        primary: Color(0xffFDA766),
                        minimumSize: const Size(100, 49),
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0),)
                    ),
                  ),
                ),
              ]
          ),
        ),
      ]

  ),
);
}


}

这是我的输出： - 这是图像上传之前的输出图像

映像上传之后： - 和此图像上传后，上传所有两列

请帮助我我如何解决这个问题。我在上传时通过了争论，但行不通。 它还具有添加和删除列的功能，

我需要这种输出： - 这是输出的图像我想要

Answer 1

您不使用i索引_previewImage（i）。当您选择图像时，应该将它们存储在列表中，例如list＆lt; pickedfile？＆gt; _images = [];和_pickimage setState的内部将挑选的图像添加到该列表。
现在，在_previewImage（i）的内部，您将仅在i索引_IMAGES中拍摄图像。

您需要最初为添加的每个新项目设置为无效，因此您不会获得“范围”的例外。因此，您的initstate，on_clicked（）和_previewImage应该看起来像：

  @override
  void initState() {
    for (int i = 0; i < 2; i++) {
      Widget child = _newItem(i);
      _list.add(child);
      _images.add(null);
    }
  }

  void on_Clicked() {
    Widget child = _newItem(counter);
    setState(
      () {
        _list.add(child);
        _images.add(null);
      },
    );
  }

  Widget _previewImage(int i) {
    var imageFile;
    if(_images.isNotEmpty && i < _images.length){
       imageFile = _images[i];
    }
    else {
       imageFile = null;
    }
    if (imageFile != null) {
      return SizedBox(
        key: Key(i.toString()),
        //width: 300,
        height: 100,
        child: Center(
          child: ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.file(
                File(
                  imageFile!.path ,
                ),
                height: 80,
              )),
        ),
      );
    } else {
      return InkWell(
        onTap: () => _pickImage(i),
        child: SizedBox(
          //width: 300,
          height: 100,
          child: Center(
            child: Icon(
              Icons.image,
              color: Color(0xffcccccc),
              size: 60,
            ),
          ),
        ),
      );
    }
  }

  Widget _newItem(int i) {
    Key key = new Key('item_${i}');
    Column child = Column(key: key, children: [
      Stack(children: [
        Card(
          elevation: 0,
          shape: RoundedRectangleBorder(
            side: BorderSide(
              color: Color(0xffa1a1a1),
            ),
            borderRadius: BorderRadius.all(Radius.circular(12)),
          ),
          child: _previewImage(i),
        ),
        Positioned(
          top: 9,
          right: 9,
          child: IconButton(
              onPressed: () => _removeItem(i), icon: Icon(Icons.close)),
        )
      ]),
    ]);
    counter++;
    return child;
  }

  void _removeItem(int i) {
    setState(() => _list.removeAt(i));
  }

  void _pickImage(int i) async {
    try {
      final pickedFile = await _picker.getImage(source: ImageSource.gallery);
      setState(() {
        _imageFile = pickedFile;
        _images[i] = _imageFile;
      });
    } catch (e) {
      //print("Image picker error ${e!}");
      print("Image picker error");
    }
  }

    

如果您可以重构代码，那将是很好的（例如，代替助手方法使用小部件，