Question

在我的页面上，有一个拍照按钮。拍摄完该照片后，它将更新我的模型（使用提供者ChangeNotifier）。拍照后，页面将重新构建，并在Scaffold主框架中构建小部件：

Widget build(BuildContext context) {
  return SingleChildScrollView(
    // Somewhere in the middle of this
    getPicturesSection(),
    // Continue with other widgets
  )
}

Widget getPicturesSection(BuildContext context) {
  var imagesPath = Provider.of<MyModel>(context, listen:false).imagesPath;
  var wids = <Widget>[]

  // Basically show all the taken pictures
  imagesPath.forEach((f) {
      wids.add(
          Image.file(
              File(f)
          )
      )
  })

  return Row(children: wids);
}

我想做的是允许用户删除每个图像。因此，我想在每个图像下方添加一个删除图标：

imagesPath.forEach((f) {
    wids.add(
        Column(
            children: <Widget> [
                Image.file(
                    File(f)
                ),
                IconButton(
                    onTap: () {
                        // How do I delete from the very same list that I am using to build this list?
                    }
                ),
            ],
        )
    )
})

没关系，我想出了答案。因为我已经在使用ChangeNotifier，所以我只需要添加函数以从模型中删除条目，更改就会向下传播。

List<String> imagesPath = new List<String>();
removeRejectionPicturePath(int ind) {
  this.imagesPath.removeAt(ind);
  notifyListeners();    // This will basically ask all the widgets that is the listener to rebuild the widget tree
}

Answer 1

您可以尝试一下！

imagesPath.forEach((f) {
    wids.add(
        Column(
            children: <Widget> [
                Image.file(
                    File(f)
                ),
                IconButton(
                  icon:Icon(Icons.remove_circle),
                    onPressed: () {
                       setState((){
                         wids.removeAt(imagesPath.values.toList().indexOf(f));
                       });                       
                    }
                ),
            ],
        )
    );
});

从小部件的列表中删除图像

1 个答案: