我要制作五个容器，每个容器中都包含带有星标图标的IconButton，我希望星标在按下时可以切换颜色，我使用了变量color2，最初将其等于{{ 1}}，因为它将显示在代码中。但是，问题是当我按下图标按钮之一时，所有星星都会更改其颜色。这是代码：
Colors.grey编辑，我将颜色添加为类中的元素，如下所示，但是如果我按下任何按钮，颜色都不会改变：
class _MyHomePageState extends State<MyHomePage> {
bool _star1;
Color color1 =Colors.grey;
Color color2=Colors.grey;
List<Meal> list1=[Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat: '20th of september 2018'),
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat:'21th of september 2018'),
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat:'22th of september 2018'),
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat:'23th of september 2018'),
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat:'24th of september 2018')];
change(){
setState(() {
if (color2==Colors.grey){
color2=Colors.yellow;
}
else {
color2=Colors.grey;
}
});
}
bool hi(String x){
if (x!='22th of september 2018'&&x!='20th of september 2018'&&x!='21th of september 2018'){
_star1 =true;
}
else{
_star1=false;
}
return _star1;
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('listviewww'),),
body:
ListView( children:list1
.map((element){
return Column(
children: <Widget>[
Container(
child: Text(element.dat),),
Container(
margin: EdgeInsets.all(9.0),
constraints: new BoxConstraints.expand(height: 300.0),
decoration: new BoxDecoration(
border: new Border.all(color: Colors.blueAccent),
borderRadius: BorderRadius.horizontal( left:Radius.circular(30.0) ,right:Radius.circular(30.0) ),
image: new DecorationImage(image: new AssetImage('assets/food1.jpg'),fit: BoxFit.cover,),),
padding: EdgeInsets.only(bottom: 10.0),
child:Column(
children:<Widget>[
Row(children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 80.0),
alignment: Alignment.topRight,
child:IconButton(
onPressed:(){ hi(element.dat)?null:change();},
icon:Icon(Icons.star),color:color2 ,)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.topCenter,
padding: const EdgeInsets.only(bottom: 1.0),
child: Text(
element.name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 40.0),),),
Container(
margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 90.0),
child:Text(element.dis,style: TextStyle(color: Colors.grey[800],fontSize: 18.0),),),],), ),
Container(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 80.0),
alignment: Alignment.topLeft,
child:IconButton(
onPressed:null,
icon:Icon(Icons.done_all,color: hi(element.dat)?Colors.grey:Colors.lightBlue,)),),],),],))],);
}).toList()));}}
有什么主意吗？ 预先感谢。
答案 0 :(得分：0)
这里的问题是，每当单击任何一个stat时，您都在对所有列表变量（color2）使用相同的变量，然后setState设置适用于所有小部件的第二种颜色，因此您面临此问题。为了避免这种情况，您可以在list1的元素中添加颜色属性。并在点击事件时更改颜色。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: new MyHomePage(),
);
}
}
class Meal{
String dis;
String name;
String dat;
Color color = Colors.grey;
Meal({String name, String dis,String dat,Color color}){
this.dat = dat;
this.name = name;
this.dis = dis;
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _star1;
Color color1 =Colors.grey;
Color color2=Colors.grey;
List<Meal> list1=[
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat: '20th of september 2018'),
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat:'21th of september 2018'),
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat:'22th of september 2018'),
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat:'23th of september 2018'),
Meal(dis:'it is a chicken sandwichh',name: 'chekin filla',dat:'24th of september 2018')
];
change(Meal current){
setState(() {
if (current.color==Colors.grey){
current.color=Colors.yellow;
}
else {
current.color=Colors.grey;
}
});
}
bool hi(String x){
if (x!='22th of september 2018'&&x!='20th of september 2018'&&x!='21th of september 2018'){
_star1 =true;
}
else{
_star1=false;
}
return _star1;
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('listviewww'),),
body:
ListView( children:list1
.map((element){
return Column(
children: <Widget>[
Container(
child: Text(element.dat),),
Container(
margin: EdgeInsets.all(9.0),
constraints: new BoxConstraints.expand(height: 300.0),
decoration: new BoxDecoration(
border: new Border.all(color: Colors.blueAccent),
borderRadius: BorderRadius.horizontal( left:Radius.circular(30.0) ,right:Radius.circular(30.0) ),
),
padding: EdgeInsets.only(bottom: 10.0),
child:Column(
children:<Widget>[
Row(children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 30.0),
alignment: Alignment.topRight,
child:IconButton(
onPressed:(){ hi(element.dat)?null:change(element);},
icon:Icon(Icons.star),color:element.color ,)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.topCenter,
padding: const EdgeInsets.only(bottom: 1.0),
child: Text(
element.name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 40.0),),),
Container(
margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 90.0),
child:Text(element.dis,style: TextStyle(color: Colors.grey[800],fontSize: 18.0),),),],), ),
Container(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 80.0),
alignment: Alignment.topLeft,
child:IconButton(
onPressed:null,
icon:Icon(Icons.done_all,color: hi(element.dat)?Colors.grey:Colors.lightBlue,)),),],),],))],);
}).toList()));}}