Flutter-筛选收藏夹不工作(仅显示收藏夹不工作)

Question

每当我在弹出菜单中按下"仅显示收藏夹"时，它只显示列表中的第一个项目，而不显示我标记为收藏夹的特定项目

以下是我的产品型号(product.dart，在providers文件夹中(

class Product with ChangeNotifier {
final String id;
final String title;
final String description;
final double price;
final String imageUrl;
bool isFavorite;
Product({
required this.id,
required this.title,
required this.description,
required this.price,
required this.imageUrl,
this.isFavorite = false,
});
void toggleFavoriteStatus() {
isFavorite = !isFavorite;
notifyListeners();
}
}

我在我的应用程序中使用提供商状态管理，下面是我向我的应用提供数据的文件，该文件是提供商文件夹中的products.dart

class Products with ChangeNotifier {
final List<Product> _items = [
Product(
id: 'p1',
title: 'Red Shirt',
description: 'A red shirt - it is pretty red!',
price: 29.99,
imageUrl:
'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
),
Product(
id: 'p2',
title: 'Trousers',
description: 'A nice pair of trousers.',
price: 59.99,
imageUrl:
'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Trousers%2C_dress_%28AM_1960.022-8%29.jpg/512px-Trousers%2C_dress_%28AM_1960.022-8%29.jpg',
),
Product(
id: 'p3',
title: 'Yellow Scarf',
description: 'Warm and cozy - exactly what you need for the winter.',
price: 19.99,
imageUrl:
'https://live.staticflickr.com/4043/4438260868_cc79b3369d_z.jpg',
),
Product(
id: 'p4',
title: 'A Pan',
description: 'Prepare any meal you want.',
price: 49.99,
imageUrl:
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Cast-Iron-Pan.jpg/1024px-Cast-Iron-Pan.jpg',
),
];
List<Product> get favoriteItems {
return _items.where((prodItem) => prodItem.isFavorite).toList(); // Supposed to return all prodItems where isFavorite is true
}
List<Product> get items {
return [..._items];
}
Product findById(id) {
return items.firstWhere((prod) => prod.id == id);
}
}

正如您在上面看到的，我正在创建两个产品实例，以显示收藏夹(通过使用favoriteItems getter(还是全部(使用items getter(

下面是一个文件，通过将一个_showFavoritesOnly的bool传递到product_grid小部件来管理显示收藏夹还是全部项目

enum FilterOption { favorites, all }
class ProductsOverviewScreen extends StatefulWidget {
const ProductsOverviewScreen({Key? key}) : super(key: key);
@override
State<ProductsOverviewScreen> createState() => _ProductsOverviewScreenState();
}
class _ProductsOverviewScreenState extends State<ProductsOverviewScreen> {
var _showFavoritesOnly = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('MyShop'),
actions: [
PopupMenuButton(
onSelected: (FilterOption selectedValue) {
setState(() {
if (selectedValue == FilterOption.favorites) {
_showFavoritesOnly = true;
} else {
_showFavoritesOnly = false;
}
});
},
icon: const Icon(Icons.more_vert),
itemBuilder: (_) => [
const PopupMenuItem(
child: Text('Show Favorites'),
value: FilterOption.favorites,
),
const PopupMenuItem(
child: Text('Show All'),
value: FilterOption.all,
),
],
)
],
),
body: ProductsGrid(showFavs: _showFavoritesOnly),
);
}
}

下面是product_grid.dart文件

class ProductsGrid extends StatelessWidget {
final bool showFavs;
const ProductsGrid({
Key? key,
required this.showFavs,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final productData = Provider.of<Products>(context);
final products = showFavs ? productData.favoriteItems : productData.items;
return GridView.builder(
padding: const EdgeInsets.all(20),
itemCount: products.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
value: products[i],
child: const ProductItem(),
),
);
}
}

下面是product_item.dart文件

class ProductItem extends StatelessWidget {
const ProductItem({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final product = Provider.of<Product>(context, listen: false);
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: GridTile(
child: GestureDetector(
onTap: () {
Navigator.pushNamed(context, ProductDetailScreen.id,
arguments: product.id);
},
child: Image.network(
product.imageUrl,
fit: BoxFit.cover,
),
),
footer: GridTileBar(
backgroundColor: Colors.black87,
leading: Consumer<Product>(
builder: (ctx, product, _) => IconButton(
icon: Icon(
product.isFavorite ? Icons.favorite : Icons.favorite_border,
),
onPressed: () {
product.toggleFavoriteStatus();
},
color: Theme.of(context).accentColor,
),
),
title: Text(
product.title,
textAlign: TextAlign.center,
),
trailing: IconButton(
icon: const Icon(Icons.shopping_cart),
onPressed: () {},
color: Theme.of(context).accentColor,
),
),
),
);
}
}

Answer 1

在product_item.dart中将侦听从false更改为true。

final product = Provider.of<Product>(context, listen: true);