即使您退出页面,ListView 也会保留数据
ListView keeps data even if you exit the page
好morning/evening。希望你一切都好。
我的 ListView 有问题。
我在我的 EditArticlePage(StatefulWidget) 的构造函数中收到一个文章对象,我的文章的属性之一是我在我的提供者 EditArticlePageProvider 的构造函数中传输的链接列表,然后我检索这些图像,我在 ListView 中显示。
当我从我的 ListView 中删除一张图片时,它被删除了,到目前为止,没问题(2 张图片 - 1 张图片 = 1 张图片)。
但是当我离开 EditArticlePage(按后退按钮或应用栏上的后退按钮)并返回时,我的 ListView 保留了我之前所做的修改,而不是文章的初始数据。
P.S: 除了包含图像的 ListView 之外,所有其他数据都被重置。
这是我的代码:
我的 EditArticlePage class
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();
}
}
}
你们可以帮帮我吗?如果我做错了什么请告诉我谢谢!
因为originalImages
和widget.article.imagesLinks
实际上是对同一个列表对象的引用,当originalImages.removeAt(index);
在addToDeleteList
方法中时,它会删除索引处的图像此列表对象和两个引用受到影响。
然后,如果你想保留widget.article.imagesLinks
中的图片,你可以复制EditArticlePageProvider
中的列表:
EditArticlePageProvider({@required List originalImages}) : this.originalImages = List.of(originalImages);
好morning/evening。希望你一切都好。
我的 ListView 有问题。
我在我的 EditArticlePage(StatefulWidget) 的构造函数中收到一个文章对象,我的文章的属性之一是我在我的提供者 EditArticlePageProvider 的构造函数中传输的链接列表,然后我检索这些图像,我在 ListView 中显示。
当我从我的 ListView 中删除一张图片时,它被删除了,到目前为止,没问题(2 张图片 - 1 张图片 = 1 张图片)。
但是当我离开 EditArticlePage(按后退按钮或应用栏上的后退按钮)并返回时,我的 ListView 保留了我之前所做的修改,而不是文章的初始数据。
P.S: 除了包含图像的 ListView 之外,所有其他数据都被重置。
这是我的代码:
我的 EditArticlePage class
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();
}
}
}
你们可以帮帮我吗?如果我做错了什么请告诉我谢谢!
因为originalImages
和widget.article.imagesLinks
实际上是对同一个列表对象的引用,当originalImages.removeAt(index);
在addToDeleteList
方法中时,它会删除索引处的图像此列表对象和两个引用受到影响。
然后,如果你想保留widget.article.imagesLinks
中的图片,你可以复制EditArticlePageProvider
中的列表:
EditArticlePageProvider({@required List originalImages}) : this.originalImages = List.of(originalImages);