Flutter:迭代期间并发修改:Instance(length:2) of '_GrowableList'

Question

这是一个游戏，屏幕上随机出现一个小矩形，玩家必须点击它才能摆脱它，屏幕的另一部分会生成一个新的矩形。我的代码有效，但每次点击我在屏幕上绘制的矩形时，都会出现以下错误。我该如何解决这个问题？

Main.dart:

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flame/flame.dart';
import 'package:flame/util.dart';
import 'package:flutter/services.dart';
import 'package:langaw/langaw-game.dart';
import 'package:flutter/gestures.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  Util flameUtil = Util();
  await flameUtil.fullScreen();
  await flameUtil.setOrientation(DeviceOrientation.portraitUp);

  LangawGame game = LangawGame();
  runApp(game.widget);

  TapGestureRecognizer tapper = TapGestureRecognizer();
  tapper.onTapDown = game.onTapDown;
  flameUtil.addGestureRecognizer(tapper);

}

飞镖:

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:langaw/langaw-game.dart';

class Fly {

  Rect flyRect;
  Paint flyPaint;
  bool isDead = false, isOffScreen = false;
  final LangawGame game;

//  initialized with the game instance, along with positions x and y
  Fly({this.game, double x, double y}) {
    flyRect = Rect.fromLTWH(x, y, game.tileSize, game.tileSize);
    flyPaint = Paint();
    flyPaint.color = Color(0xff6ab04c);
  }

//  needs a render and update method

//  this method will do the drawing
  void render(Canvas canvas) {
    canvas.drawRect(flyRect, flyPaint);
  }

  void update(double t) {
    if (isDead) {
      flyRect = flyRect.translate(0, game.tileSize * 12 * t);
      if (flyRect.top > game.screenSize.height) {
        isOffScreen = true;
      }
    }

  }

  void onTapDown() {
    flyPaint.color = Color(0xffff4757);
    isDead = true;
    game.spawnFly();
  }
}

langaw-game.dart:

import 'dart:ui';
import 'package:flame/game.dart';
import 'package:flame/flame.dart';
import 'package:langaw/components/fly.dart';
import 'dart:math';
import 'package:flutter/gestures.dart';

class LangawGame extends Game {

  Size screenSize;
  double tileSize;

  List<Fly> flies;

  Random rnd;

  LangawGame() {
    initialize();
  }

  void initialize() async {
    flies = List<Fly>();
    rnd = Random();
    resize(await Flame.util.initialDimensions());
    spawnFly();
  }

//  this method will do the drawing
  void render(Canvas canvas) {
    Rect bgRect = Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
    Paint bgPaint = Paint();
    bgPaint.color = Color(0xff576574);
    canvas.drawRect(bgRect, bgPaint);

//    now the flies are rendered on top of the background
    flies.forEach((Fly fly) => fly.render(canvas));
//    print(screenSize.toString());
  }

  void update(double t) {
    flies.forEach((Fly fly) => fly.update(t));
    flies.removeWhere((Fly fly) => fly.isOffScreen);
  }

  void spawnFly() {
    double xPos = rnd.nextDouble() * (screenSize.width - tileSize);
    double yPos = rnd.nextDouble() * (screenSize.height - tileSize);
    flies.add(Fly(game: this, x: xPos, y: yPos));
  }

  void resize(Size size) {
    screenSize = size;
    tileSize = screenSize.width / 9;
  }

  void onTapDown(TapDownDetails d) {
    flies.forEach((Fly fly) {
      if (fly.flyRect.contains(d.globalPosition)) {
        fly.onTapDown();
      }
    });
  }
}

The following ConcurrentModificationError was thrown while handling a gesture:
Concurrent modification during iteration: Instance(length:2) of '_GrowableList'.

When the exception was thrown, this was the stack: 
#0      List.forEach (dart:core-patch/growable_array.dart:286:36)
#1      LangawGame.onTapDown (package:langaw/langaw-game.dart:57:11)
#2      TapGestureRecognizer.handleTapDown.<anonymous closure> (package:flutter/src/gestures/tap.dart:463:51)
#3      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
#4      TapGestureRecognizer.handleTapDown (package:flutter/src/gestures/tap.dart:463:11)
...
Handler: "onTapDown"
Recognizer: TapGestureRecognizer#a4e24
  state: possible
  button: 1

Answer 1

我今天在学习 flutter game 上的教程时遇到了同样的问题(不错的教程顺便说一句，除了我认为这个小错误，我会尽快发表评论)。

问题在于 LangawGame.onTapDown 在苍蝇列表上进行迭代，并且在迭代期间调用 Fly.onTapDown() 在 spawnFly 方法中将元素添加到列表中。

所以列表在迭代时会被修改......恕我直言，这听起来像是一个错误。

简单的解决方案是使用 List.from 制作列表的副本以进行迭代:即在 LangawGame 中:

void onTapDown(TapDownDetails d) {
    List<Fly>.from(flies).forEach((Fly fly) {
      if (fly.flyRect.contains(d.globalPosition)) {
        fly.onTapDown();
      }
    });

有更多高性能解决方案，但代码更多:)