flutter) 如何在一個屏幕上使用多個images_pickers

Question

我將創建幾個可以包含圖像的容器。 這個圖像容器是通過一個按鈕和 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 應該像容器一樣使用列表創建，我能知道如何做到這一點嗎？

謝謝你。

Answer 1

0. 您可以使用final _pickedImages = <int, dynamic>{}而不是var _pickedImage; 其中鍵 - 索引，值 - 圖像

1. 您必須將索引傳遞給Widget _detailImage()方法，例如Widget _detailImage(int index)

2. 將索引傳遞給_getImage(int index, PickedFile imageTest, {ImageSource source})

3. 將 imageTest 保存到 _pickedImages 地圖，如下所示：

   setState(() { _pickedImages[index] = imageTest; });

4. 而不是_pickedImage ，現在您可以使用_pickedImages[index]

5. 你的List<InkWell> _detailImageList = []; 現在將List<InkWell> _detailImageList = [ _detailImage(0), _detailImage(1), ... ];