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

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 小部件很容易，只需使用 setState() 更改 color 属性，我如何更改颜色之前选择的“匹配”容器？要使用图像，在用户点击匹配的“两个”容器后，我如何同时更改“两个”和“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 分开很方便。

效果很好。请引用下图: