flutter) 如何在一个屏幕上使用多个images_pickers答案

【问题标题】：flutter) How to use multiple images_pickers on one screenflutter) 如何在一个屏幕上使用多个images_pickers
【发布时间】：2021-12-18 21:03:33
【问题描述】：

我将创建几个可以包含图像的容器。该图像容器是通过按钮和 ListView.builder 添加的。所以我试着把每张图片都放到这个图片容器里，但是有问题。

当通过picker_image选择图像时，相同的图像被放入所有容器中。而且当我选择一个图像时，它不会直接应用于容器，并且图像是从新创建的容器中输出的。

我使用 image_picker：^0.6.7 和 image_picker_for_web：^0.1.0。（我在网络上测试过）

正文部分代码

  //image
  var _pickedImage; 
  var _pickWebImage; //web test
  PickedFile _image;

  bool addImageSelete = false;
  bool isWeb = false; //check platform

  //image picker
  final picker = ImagePicker();

  //image container list (add press button)
  List<InkWell> _detailImageList = [];

          //image picker container list
          Container(
            height: isWeb ? 300 : MediaQuery.of(context).size.width * 2 / 5,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                //Add image container 
                Expanded(
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    // physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return _detailImageList[index];
                    },
                    itemCount: _detailImageList.length,
                  ),
                ),
              ],
            ),
          ),
          //add image container list 
         _addButton(),

图像容器小部件代码

  Widget _detailImage() {
//test
PickedFile _detailImageFile;

return InkWell(
  onTap: () async {
    //alert (seleted 'add image' or 'remove image')
    await _seletedDialogBox(context);
    //after alert seleted
    if (addImageSelete)
      _getImage(_detailImageFile, source: ImageSource.gallery);

    setState(() {
      addImageSelete = false;
    });
  },
  child: Container(
    margin: EdgeInsets.symmetric(horizontal: 10),
    width: MediaQuery.of(context).size.width * 2 / 5,
    height: MediaQuery.of(context).size.width * 2 / 5,

    child: _pickedImage == null
        ? Center(
            child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Not Image Yet",
              ),
            ],
          ))

        //output image
        : isWeb
            ? _pickedImage
            
            : Image.file(
                _pickedImage,
                fit: BoxFit.cover,
              ),
  ),
);

}

image_picker 方法

   Future<void> _getImage(PickedFile imageTest, {ImageSource source}) async {
    imageTest = await picker.getImage(source: source); 
    //test
    setState(() {
      if (imageTest != null) {
        if (isWeb) {
          _pickedImage = Image.network(
            imageTest.path,
            fit: BoxFit.cover,
          );
        } else {
          _pickedImage = File(imageTest.path);
        }
      }
    });
  }

我认为 image_picker 应该像容器一样使用列表创建，我知道该怎么做吗？

谢谢。

【问题讨论】：

标签： android ios list flutter web

【解决方案1】：

您可以使用final _pickedImages = <int, dynamic>{} 代替var _pickedImage; where key - index, value - image
您必须将索引传递给Widget _detailImage() 方法，例如Widget _detailImage(int index)
将索引传递给_getImage(int index, PickedFile imageTest, {ImageSource source})
将 imageTest 保存到 _pickedImages 地图，如下所示：

setState(() { _pickedImages[index] = imageTest; });
现在你可以使用_pickedImages[index]代替_pickedImage
您的List<InkWell> _detailImageList = []; 现在将 List<InkWell> _detailImageList = [ _detailImage(0), _detailImage(1), ... ];

【讨论】：