我目前正在开发一个 GridView
,它为列表中的每个项目构建一个 Container
小部件。
new GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.3,
children: cardSet.map((card){
Color containerColor = Colors.blue;
return new GestureDetector(
onTap: (){
setState(){
containerColor = Colors.green;
//This part is unsolved:
containerColor.of(matchingWidget) = Colors.green;
};
}
child: new Container(
color: containerColor,
),
);
}).toList()),
所以这是我的问题:我希望用户在 GridView 中找到匹配的值,并且由于每个 Container
都有一个值,因此使用 onTap
选择两个值要么导致匹配值,要么导致不匹配值。在这两种情况下,两个选定的 Container
小部件的颜色应该会改变。
更改最后选择的 Container
小部件很容易,只需使用 setState()
更改 color
属性,我如何更改颜色之前选择的“匹配”容器?要使用图像,在用户点击匹配的“两个”容器后,我如何同时更改“两个”和“2”容器的颜色?
我是使用 key
属性来存储对“匹配”小部件的引用还是有其他可能性?
最佳答案
我制作了 class myCard
如下:
class myCard {
String key;
Color color;
String match;
myCard( {
this.key,
this.color,
this.match
});
}
然后,创建了如下所示的 cardSet
列表:
class _MyHomePageState extends State<MyHomePage> {
var cardSet = [
myCard(key:"two", color:Colors.blue, match:"2"),
myCard(key:"3", color:Colors.blue, match:"three"),
myCard(key:"one", color:Colors.blue, match:"1"),
myCard(key:"2", color:Colors.blue, match:"two"),
myCard(key:"10", color:Colors.blue, match:"ten"),
myCard(key:"ten", color:Colors.blue, match:"10"),
myCard(key:"three", color:Colors.blue, match:"3"),
myCard(key:"1", color:Colors.blue, match:"one"),
];
我认为您可以按照自己的风格来制作。实际上,我们可以调用myCard
作为模型。
然后我制作了 getMatchCard
函数来查找相关卡片。
myCard getMatchCard(card){
return cardSet.where((_card)=>_card.match==card.key).toList()[0];
}
最后,我通过myColor
的属性在setState
中设置了卡片的颜色。
containerColor
是局部变量,无法保留其数据。因此,我认为我们需要成员变量来在创建所有 GestureDetector
之后保存数据。
child: new GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.3,
children: cardSet.map((card){
return new GestureDetector(
onTap: (){
setState((){
card.color = Colors.green; // a color of Tapped card
getMatchCard(card).color = Colors.green; // a color of related card
});
},
child: new Container(
color: card.color,
child:Text(card.key) // I set the text in myself because I can not see your cardSet data.
),
);
}).toList()),
要知道,Flutter 衍生出了响应式编程。因此,将 model
和 view by state
分开很方便。
关于flutter - 远程更改列表中的小部件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56328921/