通过按钮颤动改变绘制圆的半径

Question

作为this链接文章的后续。我正在做一个 Flutter 项目，我想通过两个按钮来增加圆的半径。

现在我已经部分成功了，但还不能很好地工作。我真的不知道该如何解释，但我会尽力而为：

发生的事情是，只要我按下减号按钮，它就会变小​​一步。如果我再次按下减号按钮，它会再次变小一点。但只要我再次按下加号，它就会保持相同的大小，直到我通过最大的数字。

video 的问题如果没有得到清楚的解释。

也许有人知道如何处理这个问题？

代码（删除了不必要的代码）：

class _AddRayPageState extends State<AddRayPage> {

  List<Marker> myMarker = [];
  final Set<Circle> circle = {};
  GoogleMapController mapController;
  int _n = 8;
  LatLng startLoc = LatLng(52.0907374, 5.1214201);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toevoegen'),
      ),
      body: Stack(children: <Widget>[
        GoogleMap(
          onMapCreated: onMapCreated,
          markers: Set.from(myMarker),
          initialCameraPosition: CameraPosition(target: startLoc, zoom: 8),
          circles: circle,
        ),
      ]),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 40.0),
            child: Container(
              child: Row(
                children: <Widget>[
                  Container(
                    width: 40.0,
                    height: 40.0,
                    child: new FloatingActionButton(
                      heroTag: "btnAdd",
                      onPressed: add,
                      child: new Icon(
                        Icons.add,
                        color: Colors.black,
                        size: 30,
                      ),
                      backgroundColor: Colors.white,
                    ),
                  ),
                  new Text('$_n', style: new TextStyle(fontSize: 40.0)),
                  Container(
                    width: 40.0,
                    height: 40.0,
                    child: new FloatingActionButton(
                      heroTag: "btnMinus",
                      onPressed: minus,
                      child: new Icon(
                        const IconData(0xe15b, fontFamily: 'MaterialIcons'),
                        color: Colors.black,
                        size: 30,
                      ),
                      backgroundColor: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  void add() {
    setState(() {
      _n++;
    });
    addRadiusToMap(_n);
  }

  void minus() {
    setState(() {
      if (_n != 1) _n--;
    });
    addRadiusToMap(_n);
  }

  void addRadiusToMap(radius) {
    setState(() {
      double reciprocal(double d) => 1000 * d;
      circle.add(Circle(
        circleId: CircleId("1"),
        center: startLoc,
        radius: reciprocal(radius.toDouble()),
      ));
    });
  }

Answer 1

circle 是一个 Set，一个 Set 不允许重复的对象，在 addRadiusToMap 中您要添加一个新的 Circle 对象，但如果之前有一个具有相同字段的对象（7 和 8 已经存在），它将不会添加它，我认为小部件 GoogleMaps 没有看到 Set<Circle> 的变化并且没有更新/动画新的 Circle，现在尝试在添加之前添加 circle.clear() 如果添加返回 false（返回 false 并且设置为没有改变）

  void add() {
    setState(() {
      _n++;
      addRadiusToMap(_n);
    });
  }

  void minus() {
    if (_n != 1)
      setState(() {
        _n--;
        addRadiusToMap(_n);
      });
  }

  void addRadiusToMap(radius) {
    //No purpose in having 2 setState
    double reciprocal(double d) => 1000 * d;
    circle.clear(); //Maybe clear the set before adding to avoid repeated values
    circle.add(Circle(
      circleId: CircleId("1"),
      center: startLoc,
      radius: reciprocal(radius.toDouble()),
    ));

  }

我不太确定（我没有使用 Google Maps 包）拥有 Set<Circle> 的目的是什么，但据我了解代码，Set 并没有真正更新，因为您已经拥有这些值