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

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的{​​{1}}属性更改，我如何更改先前选择的“匹配”容器的颜色？要使用图像，在用户轻按匹配的“ two”容器之后，如何同时更改“ two”和“ 2”容器的颜色？

我是否使用setState()属性存储对“匹配”小部件的引用，或者还有另一种可能性？

Answer 1

我做了import numpy as np toy = np.random.random(size=(2,2)) # a toy input array n = 100 # number of random values randos = np.random.uniform(-3,7,size=n) # generate 100 uniform randoms # now multiply all elements in toy by the randoms in randos out = toy[None,...]*randos[...,None,None] # this depends on the shape. # this will work only if toy has two dimensions. Otherwise requires modification # it will take a lot of memory... 100*toy.nbytes worth # now save in the loop.. for i,o in enumerate(out): name = 'P{}D1'.format(str(i+1)) np.savetxt(name,o,delimiter=",") # a second way without the broadcasting (slow, better on memory) # more like 2*toy.nbytes #for i,r in enumerate(randos): # name = 'P{}D1'.format(str(i+1)) # np.savetxt(name,r*toy,delimiter=",") 如下：

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]; } 的属性在setState中设置了卡片的颜色。 myColor是局部变量，因此无法保留其数据。因此，我认为在创建所有containerColor之后，我们需要成员变量来保留数据。

GestureDetector

您知道，Flutter派生了反应式编程。因此，将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()), 和model分开很方便。

效果很好。请参考下图：