[英]Flutter - Build Widgets dynamically
我正在尝试动态构建小部件列表
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与当前迭代的计数器,这样如果用户点击一个元素,它只会对它进行着色。 例如,如果我将计数器设置为3,那么一切都会被选中,因为它仍然是指向计数器变量,而不是当前的交互,如果你知道我的意思。
关于如何有效解决这个问题的任何建议?
您需要将计数器变量的当前值捕获到闭包中:
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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.