Flutter 中的文本小部件为 for 循环中的所有文本小部件显示相同的文本答案

【问题标题】：Text widget in Flutter shows same text for all Text widgets in for loopFlutter 中的文本小部件为 for 循环中的所有文本小部件显示相同的文本
【发布时间】：2022-02-20 01:31:17
【问题描述】：

在 Flutter 中，我在 for 循环中使用 Text 小部件。控制台显示了一个很好的不断增加的数字列表。但是所有 25 个文本小部件都显示 25。

看起来 Text 小部件确实引用了 _markersDistanceCount 而不是使用它们的值。

我也尝试了jsonEncode 和jsonDecode 的值，但它们仍然都是 25。有人知道我做错了什么吗？

var _markersDistanceCount = 0;
for (var i = 0; i < 25; i++) {
  _markersDistanceCount++;
  print(_markersDistanceCount);
  markersDistance.add(
    Marker(
      point: LatLng(point.latitude, point.longitude),
      builder: (context) => CircleAvatar(
        radius: 50,
        backgroundColor: Colors.red,
        child: Text(_markersDistanceCount.toString())
      ),
    ),
  );
}

当我将Text(_markersDistanceCount.toString()) 更改为Text(i.toString()) 时没有问题，并且文本小部件包含正确的i 值。

【问题讨论】：

这个功能看起来不错，可以在飞镖垫中使用。您如何使用小部件树中的列表，您是否使用 listview.builder 按索引访问元素？
markersDistance 被 flutter_map 用来在地图上显示标记。您只需提供清单即可。它被定义为List<Marker> markersDistance = [];，这应该不是问题，因为使用i而不是_markersDistanceCount时标记是正确的
你能包含小部件 => Minimal, Reproducible Example?
@YeasinSheikh 你知道像 Dart pad 这样可以使用外部包的东西吗？因为我需要 flutter_map 来重现。
我可能错了，虽然这是Text 问题，但您可以提供一个小部件，主要是您在哪里生成这些数据。

标签： flutter dart

【解决方案1】：

我假设您最终都拥有 25 作为文本。 Text() 始终具有相同的变量。

更新：

你的Text(_markersDistanceCount)都指向同一个变量，最终的值为25。

试试这个：

for (var i = 0; i < 25; i++) {
  // Either
  final _distanceCount = _markersDistanceCount++;
  // Or rather
  final _distanceCount =  i + 1;

  markersDistance.add(
    Marker(
      point: LatLng(point.latitude, point.longitude),
      builder: (context) => CircleAvatar(
        radius: 50,
        backgroundColor: Colors.red,
        child: Text(_distanceCount.toString())
      ),
    ),
  );
}

【讨论】：

这行得通！你介意分享一下为什么我需要使用 final 而不能在 for 循环之外使用 var 吗？
如果是关于创建另一个变量，我将使用i，正如他在问题中描述的那样。
我已经使用final _distanceCount = _markersDistanceCount++; 使其工作。但我有点困惑为什么我需要使用 final。
我更新了我的答案@BasvanDijk - 你也可以使用var 或const。问题是您在 for 循环之外声明 _markersDistanceCount 并且最后每个 Text(_markersDistanceCount) 都指向相同的变量，该变量最终对于所有标记具有相同的值。
所以它使用“通过引用”并且使用 const 或 final 我们使其“按值”对吗？

【解决方案2】：

_markersDistanceCount 的值在到达Marker 的builder 方法之前变为25。为了探索它，我已经调试了代码，这里我使用内联方法来显示情况。我不知道这种行为，只是在探索这个问题。

@override
void initState() {
  super.initState();
  int _markersDistanceCount = 0;
  for (int i = 0; i < 25; i++) {
    _markersDistanceCount++;
    markersDistance.add(
      () {
        debugPrint("OnTop=>  i: $i mkNUm:  ${_markersDistanceCount.toInt()}");
        return Marker(
            key: ValueKey("tm $_markersDistanceCount"),
            point: () {
              debugPrint(
                  "On point=>  i: $i mkNUm:  ${_markersDistanceCount.toInt()}");
              return LatLng(51.5 + (i * .01), -0.09);
            }(),
            builder: (context) {
              ///this gets call after while `_markersDistanceCount:25` completing the loop
              debugPrint(
                  "insideBuild=> i: $i mkNUm:  ${_markersDistanceCount.toInt()}");
              return CircleAvatar(
                radius: 50,
                backgroundColor: Colors.red,
                child: Text(
                  _markersDistanceCount.toDouble().toString(),
                ),
              );
            });
      }(),
    );
  }
}

这将打印出来

OnTop=>  i: 0 mkNUm:  1
On point=>  i: 0 mkNUm:  1
OnTop=>  i: 1 mkNUm:  2   
On point=>  i: 1 mkNUm:  2
OnTop=>  i: 2 mkNUm:  3   
.....
OnTop=>  i: 24 mkNUm:  25
On point=>  i: 24 mkNUm:  25
insideBuild=> i: 0 mkNUm:  25
insideBuild=> i: 1 mkNUm:  25

至于解决方案，您可以使用i，而两者都分担相同的责任。

【讨论】：

我仍在尝试获得这种行为。