即使您退出页面，ListView 也会保留数据

Question

早上好/晚上好。希望你一切都好。

我的 ListView 有问题。

我在 EditArticlePage(StatefulWidget) 的构造函数中收到一个 Article 对象，并且我的 Article 的属性之一是我在提供程序 EditArticlePageProvider 的构造函数中传输的链接列表，然后我检索这些图像，这些图像显示在一个列表视图。

当我从我的 ListView 中删除一张图片时，它会被删除，到目前为止，没有问题（2 张图片 - 1 张图片 = 1 张图片）。

但是当我离开EditArticlePage（按appbar上的后退按钮或后退按钮）并返回它时，我的ListView保留了我之前所做的修改，而不是文章的初始数据。

P.S：除了包含图像的 ListView 之外，所有其他数据都会被重置。

这是我的代码：

我的 EditArticlePage 类

class EditArticlePage extends StatefulWidget {
  final Article article;

  EditArticlePage(this.article, {Key key}) : super(key: key);

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

class _EditArticlePageState extends State<EditArticlePage> {

 @override
Widget build(BuildContext context) {
  return ChangeNotifierProvider<EditArticlePageProvider>(
    create: (_) =>
        EditArticlePageProvider(originalImages: widget.article.imagesLinks),
    child: Consumer<EditArticlePageProvider>(
      builder: (context, editProvider, __) {
        final screenWidth = MediaQuery.of(context).size.width;
        final screenHeight = MediaQuery.of(context).size.height;
        return WillPopScope(
          onWillPop: () {
            return Future<bool>.value(true);
          },
          child: Scaffold(
            body: ListView(
              children: [
                buildArticleImages(screenWidth, screenHeight, editProvider),
              ],
            ),
          ),
        );
      },
    ),
  );
}
}

buildArticleImages 方法

Widget buildArticleImages(double screenWidth, double screenHeight,
          EditArticlePageProvider editProvider) =>
      Container(
        padding: EdgeInsets.symmetric(horizontal: 5.0),
        width: screenWidth,
        height: screenHeight * 0.15,
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemBuilder: (_, index) {
            final imageLink = editProvider.originalImages[index];
            return Stack(
              children: [
                SizedBox(
                  height: screenHeight * 0.15,
                  width: screenWidth * 0.35,
                  child: ClipRRect(
                      borderRadius: BorderRadius.all(
                        Radius.circular(9.0),
                      ),
                      child: Image.network(
                        imageLink,
                        fit: BoxFit.cover,
                      )
                ),
                Positioned(
                  child: DeleteButton(
                    onPressed: () {
                      editProvider.addToDeleteList(imageLink, index);
                      
                    },
                  ),
                  right: 3.0,
                  top: 3.0,
                )
              ],
            );
          },
          separatorBuilder: (_, index) => SizedBox(width: 5.0),
          itemCount: editProvider.originalImages.length,
        ),
      );

我的提供者

class EditArticlePageProvider extends ChangeNotifier {
  final List originalImages;

  EditArticlePageProvider({@required this.originalImages});
  

  List<String> imagesToDelete = [];
      
List<String> get imagesToDelete => _imagesToDelete;



void addToDeleteList(String imageLink, int index) {
    if (imageLink != null) {
      imagesToDelete.add(imageLink);
      originalImages.removeAt(index);
      notifyListeners();
    }
  }

}

请你帮帮我好吗？如果我做错了什么，请告诉我谢谢！

Answer 1

因为originalImages和widget.article.imagesLinks实际上是对同一个列表对象的引用，所以当originalImages.removeAt(index);在addToDeleteList方法中时，会移除这个列表对象索引处的图片，这两个引用都会受到影响.

那么，如果你想保留widget.article.imagesLinks中的图片，你可以复制EditArticlePageProvider中的列表：

EditArticlePageProvider({@required List originalImages}) : this.originalImages = List.of(originalImages);