Flutter - 动态构建小部件

Question

我正在尝试动态构建一个widget列表。

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，则所有内容都会被选中，因为它仍然引用计数器变量，而不是当前迭代，如果你知道我的意思的话。

有没有有效解决这个问题的建议？

- OhMad

---

github.com/francesco-taioli/flutter-card-demo，你可以看到如何以编程方式创建元素。 - Francesco Taioli

Answer 1

您需要将计数器变量的当前值捕获到一个闭包中：

final _createTapHandler = (value) {
    setState(() => toggleColor(value));
};

然后你可以这样说：

onTap: _createTapHandler(counter)

也许更易于维护的解决方案是创建一个方法来构建您的手势识别器，然后您可以使用计数器值对其进行配置。

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。

- Collin Jackson

---

我需要把闭包放在哪里？ - OhMad

无论在哪里，您甚至可以将其内联声明。 onTap: ((value) { setState(() => toggleColor(value)); })(counter) - Collin Jackson