标记显示错误的数字 Flutter

问题描述

在我的应用程序中，我使用 Flutter_bloc 和 Flutter_map 包。当我跟踪路线时，我想显示跟踪点顺序，因此当我收到带有跟踪路线的状态时，我使用以下方法为路线中的每个点添加一个标记一个（forEach 或 normal）循环，它有一个图标和一个数字，所以我可以看到标记顺序。问题是，虽然标记正确放置在地图上并且图标显示正确，但显示的数字是错误的。如果我打印保存要在循环中显示的值的变量，它会正确打印，例如。 1 到 7，但是当分配给标记时，它会得到错误的值 8。 我不知道那个 8 是从哪里来的..

你能看出我在这里做错了什么吗？

这是接收状态的代码：

if (state is TrackedRoute) {
            route.clear();
            trackedPoints.clear();
            int num = 1;
            setState(() {
              route = state.trackedRoute;
            });
//              route.forEach((element) {
            for (int i = 0; i < route.length; i++) {
              LatLng element = route[i];
              print('@@@@@  num is $num'); // Todo printed number is correct
              LatLng point = LatLng(element.latitude,element.longitude);
              Marker trackedPoint = Marker(
                point: point,height: 30,width: 30,builder: (context) => Stack(
                  alignment: Alignment.topCenter,children: [
                    // Todo Prints all 8s ???!!!

                    IconButton(
                      icon: Icon(Icons.add_location),color: Colors.greenAccent,iconSize: 30,onpressed: () {},),Text(
                      num.toString(),style: TextStyle(color: Colors.red,fontSize: 25),// Todo :  displayed number is wrong
                  ],);
              trackedPoints.add(trackedPoint);
              num++;
            }

//              });

          }

这是控制台打印：

I/Flutter (24597): @@@@@  num is 2
I/Flutter (24597): @@@@@  num is 3
I/Flutter (24597): @@@@@  num is 4
I/Flutter (24597): @@@@@  num is 5
I/Flutter (24597): @@@@@  num is 6
I/Flutter (24597): @@@@@  num is 7

这是结果显示的路径，带有显示数字 8 的标记：

解决方法

发生这种情况是因为 builder 的 Marker 方法仅在 MarkerLayer 绘制在屏幕上时才被调用。因此，在调用构建器方法之前，您的 num 变量将达到最大值，因此所有标记都将获得相同的 num。

我认为使用当前的 flutter_map 包没有什么好的方法可以实现您想要的效果。 MarkerLayer 仅使用上下文调用构建器，因此您需要一些其他方法来实现此目的。问题是标记构建器无法访问关联的标记数据。

也许 the solution is in this Github issue comment。但是，当标记更改时，此解决方案会重建完整的地图。否则最好自己在 flutter_map Github 存储库上打开问题。