我正在尝试动态构建小部件列表
List<Widget> buildGrid(){
List<Widget> grid = new List<Widget>(3);
List<Widget> tiles = [];
int counter = 0;
for (int i = 0; i < 3; i++){
tiles = [];
for (int j = 0; j < 4; j++){
tiles.add(new GestureDetector(
onTap: (){
setState((){
toggleColor(counter);
});
},
child: new Container(
color: colors[counter],
width: 80.0,
height: 80.0,
margin: new EdgeInsets.all(11.3),
)
));
counter++;
}
grid[i] = new Row(
children: tiles,
);
counter = 0;
}
return grid;
}
问题在于,新添加元素的 toggleColor 始终为 12。我的意思是用当前迭代的计数器添加一个新的 GestureDetector,这样如果用户点击一个元素,它只会给它着色.例如,如果我将 counter 设置为 3,那么所有内容都会被选中,因为它仍然引用 counter 变量,而不是当前的 interation,如果你知道我的意思的话。
关于如何有效解决此问题的任何建议?
最佳答案
您需要将计数器变量的当前值捕获到一个闭包中:
final _createTapHandler = (value) {
setState(() => toggleColor(value));
};
那么你可以说:
onTap: _createTapHandler(counter)
也许更易于维护的解决方案是创建一个方法来构建您的 GestureRecognizer。然后您可以使用计数器值对其进行配置。
Widget buildTile(int tileCounter) {
return new GestureDetector(
onTap: (){
setState((){
toggleColor(tileCounter);
});
},
child: new Container(
color: colors[tileCounter],
width: 80.0,
height: 80.0,
margin: new EdgeInsets.all(11.3),
)
);
}
如果您想要更易于维护,您可以将该构建函数重构为它自己的 StatelessWidget。
https://stackoverflow.com/questions/44074797/