我有一个 Listview ，其中有多个容器，每个容器都有一个图像，另一个容器由两个按钮组成。我想在每次单击按钮时更改其图标。但是，单击按钮后，每个容器中的每个按钮都会更改。如何只更改所选按钮的图标？
import 'package:flutter/material.dart';
import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:group_project/data/data.dart';
import 'package:group_project/models/products.dart';
import 'package:group_project/ui/size_config.dart';
import 'package:group_project/constants.dart';
import 'package:group_project/widgets/custom_button_widget.dart';
import 'package:group_project/widgets/providerexample.dart';
import 'package:provider/provider.dart';
class ProductCard extends StatefulWidget {
final Products products;
ProductCard({this.products});
@override
_ProductCardState createState() => _ProductCardState();
}
class _ProductCardState extends State<ProductCard> {
void chatWithSeller() {}
@override
Widget build(BuildContext context) {
final changeIcon = Provider.of<ProviderExample>(context);
return Container(
// color: Colors.red,
height: MediaQuery.of(context).size.height,
margin: EdgeInsets.only(right: 6.6 * SizeConfig.heightMultiplier),
child: Column(
children: [
// This container contains the product image.
Container(
height: 210 * SizeConfig.heightMultiplier,
width: 200 * SizeConfig.heightMultiplier,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
widget.products.images[0],
),
fit: BoxFit.cover,
// colorFilter: new ColorFilter.mode(Colors.blueGrey.withOpacity(1.0), BlendMode.softLight),
)),
),
//This container contains the description of the image
Flexible(
fit: FlexFit.tight,
child: Container(
height: 100 * SizeConfig.heightMultiplier,
width: 200 * SizeConfig.heightMultiplier,
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.only(
top: 5 * SizeConfig.heightMultiplier),
// Title and price tag of the product
child: Container(
// color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Text(
widget.products.isUsed == true
? '${widget.products.productName} (Used)'
: '${widget.products.productName} (New)',
style: productDescTextStyle,
),
),
Text(
'Rs. ${widget.products.price}',
),
],
),
),
),
),
Expanded(
flex: 1,
//Buttons
child: Container(
padding: EdgeInsets.fromLTRB(6.6, 0, 6.6, 16.6) *
SizeConfig.heightMultiplier,
height: 53.0 * SizeConfig.widthMultiplier,
// color: Colors.yellow,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.symmetric(
horizontal:
5 * SizeConfig.heightMultiplier),
child: CustomButton(
icon: EvaIcons.shoppingCartOutline,
btnName: 'Chat with Seller',
height: 26.0 * SizeConfig.heightMultiplier,
width: 60 * SizeConfig.heightMultiplier,
buttonColor: Colors.blue,
splashColor: Colors.white,
iconColor: Colors.white,
textColor: Colors.white,
btnTextSize: 6.0,
iconSize: 14.0,
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
btnBorderRadius: BorderRadius.circular(5.0),
onTap: chatWithSeller,
),
),
),
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.symmetric(
horizontal:
5 * SizeConfig.heightMultiplier),
child: Consumer<ProviderExample>(
builder: (context, value, child) => CustomButton(
icon: changeIcon.isClicked
? EvaIcons.heart
: EvaIcons.heartOutline,
btnName: 'Add To Watchlist',
height: 26.0 * SizeConfig.heightMultiplier,
width: 80 * SizeConfig.heightMultiplier,
buttonColor: Colors.white,
splashColor: Colors.blue,
iconColor: Colors.blue,
textColor: Colors.blue,
btnTextSize: 6.0,
iconSize: 14.0,
border: Border.all(color: Colors.blue),
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
btnBorderRadius: BorderRadius.circular(5.0),
onTap: () {
if(changeIcon.isClicked) {
changeIcon.isClicked = false;
} else {
changeIcon.isClicked = true;
}
},
),
),
),
),
],
),
),
),
],
),
),
),
],
),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[400],
spreadRadius: 0,
offset: Offset(0, 1),
blurRadius: 5.0,
),
],
),
);
}
}
此产品卡在另一个类别中被调用
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:group_project/models/models.dart';
import 'package:group_project/screens/product_details.dart';
import 'package:group_project/ui/size_config.dart';
import 'package:group_project/widgets/product_card.dart';
class ProductCarousel extends StatelessWidget {
final Size size;
final List<Products> products;
final String category;
final String productTypeText;
ProductCarousel(
{@required this.products, @required this.size, @required this.category, this.productTypeText});
@override
Widget build(BuildContext context) {
// Main Container
return Container(
constraints: BoxConstraints(
maxHeight: 340 * SizeConfig.heightMultiplier,
),
width: size.width, // Takes total width.
color: Colors.grey[50],
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
// color: Colors.blue,
height: 50,
width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Text(
productTypeText,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
),
Flexible(
fit: FlexFit.tight,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: products.length,
itemBuilder: (context, index) {
// Checks if the products are of same category
if (products[index].category != category) {
if (index < products.length) {
index++;
return Container();
} else {
return Container();
}
} else {
//This container wraps the containers containing image and desc
return GestureDetector(
onTap: () {
print(Products().views);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailsPage(
product: products[index],
),
),
);
},
child: Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: ProductCard(
products: products[index],
),
),
);
}
},
),
),
],
),
);
}
}