删除收藏夹页面中的项目后，如何更新新闻页面中的收藏夹图标

Question

首先，很抱歉我的英语不好。所以我的问题是，我在从api获取的新闻页面中有一个新闻列表，每个列表上都有一个收藏夹/心形图标。在我在最喜欢的页面中添加了一个项目，然后对其进行了修改，返回到新闻页面后，该项目的先前状态仍然保留。

问题是，在我不喜欢该项目到收藏夹页面后，如何将其状态传递到新闻页面？

注意：收藏夹和新闻屏幕共享NewsList类

class DisplayFavorites extends StatefulWidget {
static List<dynamic> favoriteDataList = [];
static List<String> favoriteId = [];
static bool isFavoriteScreenActive = false;
const DisplayFavorites({Key? key}) : super(key: key);
@override
State<DisplayFavorites> createState() => _DisplayFavoritesState();
}
class _DisplayFavoritesState extends State<DisplayFavorites> {
get favDataList => DisplayFavorites.favoriteDataList;
@override
Widget build(BuildContext context) {
return NewsList(
results: favDataList,
// isFavorite: _isFavorite,
);
}
}

从news_list.dart-这是最喜欢的图标是的部分

final List<bool> _isNewsScreenFavorite = <bool>[];
@override
initState() {
for (var i = 0; i < widget.results.length; i++) {
_isNewsScreenFavorite.add(false);
}
super.initState();
}
....
child: IconButton(
onPressed: () {
setState(() {
if (DisplayFavorites.isFavoriteScreenActive) {
_isNewsScreenFavorite[index] =
!_isNewsScreenFavorite.elementAt(index);
DisplayFavorites.favoriteDataList
.remove(wResults);
} else {
_isNewsScreenFavorite[index] =
!_isNewsScreenFavorite.elementAt(index);
_isNewsScreenFavorite[index]
? DisplayFavorites.favoriteDataList
.add(wResults)
: DisplayFavorites.favoriteDataList
.remove(wResults);
}
//print(wResults.publishedAt);
});
},
icon: Icon(
DisplayFavorites.isFavoriteScreenActive
? Icons.favorite
: _isNewsScreenFavorite.elementAt(index)
? Icons.favorite
: Icons.favorite_border_outlined,
color: Colors.red,
size: 50,
),

这是news_list.dart的全部代码(如果你不理解上面的代码，你可以检查一下(

class _NewsListState extends State<NewsList> {
final List<bool> _isNewsScreenFavorite = <bool>[];
@override
initState() {
for (var i = 0; i < widget.results.length; i++) {
_isNewsScreenFavorite.add(false);
}
super.initState();
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: widget.results.length,
itemBuilder: (BuildContext context, int index) {
var wResults = widget.results.elementAt(index);
return InkWell(
splashColor: Colors.red,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DisplaySelectedNews(
urlToImage: wResults.urlToImage,
author: wResults.author,
description: wResults.description,
publishedAt: wResults.publishedAt,
title: wResults.title,
content: wResults.content,
),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 2,
horizontal: 10,
),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.network(
wResults.urlToImage,
width: double.infinity,
height: 150,
fit: BoxFit.fill,
color: Colors.grey.withOpacity(1),
colorBlendMode: BlendMode.modulate,
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Center(
child: Text(
wResults.title.toString().trim(),
style: Theme.of(context).textTheme.bodyText1!.merge(
const TextStyle(color: Colors.white),
),
),
),
),
Positioned(
right: 5.0,
bottom: 10.0,
child: Padding(
padding: const EdgeInsets.all(10),
child: IconButton(
onPressed: () {
setState(() {
if (DisplayFavorites.isFavoriteScreenActive) {
_isNewsScreenFavorite[index] =
!_isNewsScreenFavorite.elementAt(index);
DisplayFavorites.favoriteDataList
.remove(wResults);
} else {
_isNewsScreenFavorite[index] =
!_isNewsScreenFavorite.elementAt(index);
_isNewsScreenFavorite[index]
? DisplayFavorites.favoriteDataList
.add(wResults)
: DisplayFavorites.favoriteDataList
.remove(wResults);
}
//print(wResults.publishedAt);
});
},
icon: Icon(
DisplayFavorites.isFavoriteScreenActive
? Icons.favorite
: _isNewsScreenFavorite.elementAt(index)
? Icons.favorite
: Icons.favorite_border_outlined,
color: Colors.red,
size: 50,
),
),
),
),
],
),
),
),
);
},
);
}
}

Answer 1

您可以使用状态管理，如BLoc、ChangeNotifier、ValueNotifier。。。在这里，我们应该使用ValueNotifier，因为我们只需要管理一个值。

首先，我们需要创建一个ValueNotifer:

ValueNotifier<bool> isFavoriteListenable = ValueNotifier<bool>(false); //the initial value is false

接下来，要更改该值，我们只需使用：

isFavoriteListenable.value = true;//change the value to true

最后，为了听取对isFavoriteListenable所做的更改，我们使用ValueListenableBuilder。包围isFavorite值更改时需要更改的小部件，如下所示：

ValueListenableBuilder(
valueListenable: isFavoriteListenable,
builder: (BuildContext context, bool isFavorite,Widget child){
return NewsList(
results: favDataList,
isFavorite: isFavorite,
);
}
)

如果你不理解或想要更多信息，请查看以下信息：链接