Flutter - 动态构建小部件

Posted 2023-02-23

【中文标题】Flutter - 动态构建小部件

【英文标题】：Flutter - Build Widgets dynamically

【发布时间】：2017-10-19 20:44:33

【问题描述】：

我正在尝试动态构建小部件列表

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，如果你知道我的意思的话。

关于如何有效解决此问题的任何建议？

【问题讨论】：

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

【参考方案1】：

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

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。

【讨论】：

我需要在哪里放置封口？

任何地方，您甚至可以将其声明为内联。 onTap: ((value) setState(() => toggleColor(value)); )(counter)