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

Question

作为 link 文章的后续。我正在开发一个 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> 中的变化并且没有 update/animate 新的 Circle，现在尝试在之前添加 circle.clear()添加如果添加 return false(returns 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 地图包）Set<Circle> 的目的是什么，但据我了解代码，Set 不是真的更新了，因为你已经有了这些值

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

Flutter change radius of drawed circle by buttons

google-maps-markers

flutter