远程更改列表中的小部件状态

Question

我目前正在开发一个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 小部件很容易，只需将color 属性更改为setState()，但是如何更改先前选择的“匹配”容器的颜色？要使用图像，在用户点击匹配的“两个”容器后，如何同时更改“两个”和“2”容器的颜色？

我是使用key 属性来存储对“匹配”小部件的引用还是有其他可能性？

Answer 1

我做了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 分开是很舒服的。

效果很好。请参考下图：