Dart中传统for循环与手动递增变量的循环为何表现不同？

问题本质 #

你碰到的问题核心是闭包捕获的是变量的引用，而非当前值：

• 在第一个for-in循环里，i是循环外部声明的单个变量，所有卡片的onTap回调都共享这个i的引用，不是循环迭代时的具体数值。
• 循环结束后，i的值已经递增到10（因为numList包含10个元素），所以不管点击哪张卡片，回调里的i都会是10，导致颜色切换逻辑失效，打印结果也全是10。

两种循环的差异对比 #

存在问题的循环实现 #

List<Widget> nineCards() {
  List<int> numList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  List<Widget> output = [];
  int value = 42;
  int i = 0; // 单个变量，所有闭包共享同一引用
  for (int ele in numList) {
    output.add(
      Card(
        child: InkWell(
          onTap: () {
            value = i;
            print('tapped! $value'); // 点击时i已变为10
          },
          child: Container(
            color: value == i ? Colors.blue : Colors.grey, // 永远显示灰色
            child: Text('element: $ele'),
          ),
        ),
      ),
    );
    i++;
  }
  return output;
}

修复后的循环实现 #

List<Widget> nineCardsFixed() {
  List<int> numList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  List<Widget> output = [];
  int value = 42;
  // 每次迭代都会创建新的i变量，每个闭包捕获当前迭代的i引用
  for (int i = 0; i < numList.length; i++) {
    output.add(
      Card(
        child: InkWell(
          onTap: () {
            value = i;
            print('tapped! $value'); // 点击时i为当前卡片对应的索引
          },
          child: Container(
            color: value == i ? Colors.blue : Colors.grey, // 正确匹配索引切换颜色
            child: Text('element: ${numList.elementAt(i)}'),
          ),
        ),
      ),
    );
  }
  return output;
}

额外解决方案（保留for-in循环） #

如果想继续用for-in循环，只需在循环内部创建临时变量保存当前i的值，让闭包捕获这个临时变量的引用即可：

List<Widget> nineCardsFixedForIn() {
  List<int> numList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  List<Widget> output = [];
  int value = 42;
  int i = 0;
  for (int ele in numList) {
    int currentI = i; // 每次迭代创建新变量，保存当前i值
    output.add(
      Card(
        child: InkWell(
          onTap: () {
            value = currentI;
            print('tapped! $value');
          },
          child: Container(
            color: value == currentI ? Colors.blue : Colors.grey,
            child: Text('element: $ele'),
          ),
        ),
      ),
    );
    i++;
  }
  return output;
}

内容的提问来源于stack exchange，提问作者crustification