listview - 添加图像到列表 Flutter

Question

我想做这样的事情。首先，listView 中有一个按钮。单击该按钮时，它将允许用户从图库中选择图像。

选择后，所选图像将被放置到ListView中，按钮将移动到另一个项目，如下图所示。

这是我的输出。

之前

之后

我的代码

 Container(
                  child: StreamBuilder<List<Asset>>(
                      stream: _bloc.uploadImageStream,
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              images == null
                                  ? new Container(
                                      height: 300.0,
                                      width: 300.0,
                                      child: new Icon(
                                        Icons.image,
                                        size: 250.0,
                                        color: Theme.of(context).primaryColor,
                                      ),
                                    )
                                  : new SizedBox(
                                      height: 200.0,
                                      width: double.infinity,
                                      child: new ListView.builder(
                                        scrollDirection: Axis.horizontal,
                                        itemCount: snapshot.data.length,
                                        itemBuilder: (BuildContext context,
                                                int index) =>
                                            new Padding(
                                                padding:
                                                    const EdgeInsets.all(5.0),
                                                child: AssetThumb(
                                                  height: 200,
                                                  width: 200,
                                                  asset: snapshot.data[index],
                                                )),
                                      ),
                                    ),
                              IconButton(
                                  icon: Center(
                                    child: Icon(
                                      Icons.camera,
                                      size: 30.0,
                                    ),
                                  ),
                                  onPressed: () {
                                    _bloc.getImage();
                                  })
                            ],
                          );
                        } else {
                          return IconButton(
                              icon: Center(
                                child: Icon(
                                  Icons.camera,
                                  size: 30.0,
                                ),
                              ),
                              onPressed: () {
                                _bloc.getImage();
                              });
                        }
                      }))

Answer 1

我遵循了您使用的包中的一些说明 docs .

我通过编辑一些文档代码找到了解决方案。

编辑之前

Widget buildGridView() {
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length, (index) {
        Asset asset = images[index];
        return AssetThumb(
          asset: asset,
          width: 300,
          height: 300,
        );
      }),
    );
  }

修改后

Widget buildGridView() {
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length + 1, (index) {
        if (index < images.length) {
          Asset asset = images[index];
          return AssetThumb(
            asset: asset,
            width: 300,
            height: 300,
          );
        } else {
          return GestureDetector(
            child: Image.asset(
              "assets/images/add.jpg",
              width: 300,
              height: 300,
            ),
            onTap: loadAssets,
          );
        }
      }),
    );
  }

所以根据你的代码，它将是

 new SizedBox(
      height: 200.0,
      width: double.infinity,
      child: new ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: snapshot.data.length + 1,
        itemBuilder: (BuildContext context, int index) => new Padding(
            padding: const EdgeInsets.all(5.0),
            child: (index < snapshot.data.length) ? AssetThumb(
              height: 200,
              width: 200,
              asset: snapshot.data[index],
            ) : GestureDetector(
            child: Image.asset(
              "assets/images/add.jpg",
              width: 200,
              height: 200,
            ),
            onTap: loadAssets,
          )),
      ),

希望它能与您合作。