Flutter，setState() 在 Release 但在 Debug 中无法正常工作

Question

我有一个在 FutureBuilder 内部构建的堆栈，堆栈的一部分是一个 ElevatedButton，它专注于我在地图上的当前位置，这也是堆栈的一部分。

我的想法是，当我点击地图的标记时，布尔值被设置为 false（onMarkerTap），因此按钮消失，当我再次点击地图（onTap）时，按钮再次出现。 我通过使用 setState() 方法来做到这一点。

问题是，在使用调试模式时，所有这些代码都可以正常工作，但是一旦我使用释放模式，按钮就会消失并且永远不会回来。

class MapComponent extends StatefulWidget {
  const MapComponent({Key? key}) : super(key: key);

  @override
  State<MapComponent> createState() => MapSampleState();
}

class MapSampleState extends State<MapComponent> {


  ...

  bool _focusLocationVisible = true;

  @override
  void initState() {
    // TODO: implement initState

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }


  void setFocusButton(bool state){
    setState(() {
      _focusLocationVisible = state;
    });
  }

  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      
        future: _getDataFuture, 
        builder: (BuildContext jsoncontext, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) {
            return (const Center(child: CircularProgressIndicator()));
          } else {
            ... 
          }

          var size = MediaQuery.of(context).size;

          return Stack(
            children: [
              FlutterMap(
                mapController: mapController,
                layers: [
                  TileLayerOptions(...),
                  LocationMarkerLayerOptions(),
                  MarkerClusterLayerOptions(

                    ...

                    onMarkerTap:(Marker marker)=>{

                      setFocusButton(false)

                    },

                    popupOptions: PopupOptions(
                        popupController: _popupController,
                        popupSnap: PopupSnap.mapBottom,
                        popupAnimation: PopupAnimation.fade(
                            duration: Duration(milliseconds: 200)),
                        popupBuilder: (_, marker) {
                          
                          return DraggableScrollableSheet(...);
                        }),
                  ),
                ],




                options: MapOptions(
                  onTap: (TapPosition, LatLang) =>
                      {
                        _popupController.hideAllPopups(),
                        setFocusButton(true),
                        },

                  ...

                  plugins: [
                    MarkerClusterPlugin(),
                    LocationMarkerPlugin(
                      //centerOnLocationUpdate: _centerOnLocationUpdate,
                      centerCurrentLocationStream: _centerCurrentLocationStreamController.stream,
                      centerAnimationDuration: Duration(milliseconds: 500),
                    )
                  ],
                ),

              ),
             if(_focusLocationVisible == true)  
              Positioned(
                right:  20,
                bottom: 40,

                //right:  _buttonrightPosition,
                //bottom: _buttonbottomPosition,
                  child: AnimatedOpacity(
                    opacity: _focusLocationVisible ? 1.0 : 0.0,
                    duration: const Duration(milliseconds: 500),
                    child: FloatingActionButton(
                          backgroundColor: Theme.of(context).bottomAppBarColor,
                          heroTag: null,
                          onPressed: () async {
                            // Location location = Location();
                            // LocationData curloc = await location.getLocation();
                            _centerCurrentLocationStreamController.add(16);
                            //mapController.move(LatLng(curloc.latitude!, curloc.longitude!),16);
                          },
                          child: const Icon(
                            Icons.my_location,
                            color: Colors.white,
                          ),
                        ),
                      
                  ),
              ),

            ],
          );
        });
  }
}

我已经尝试直接在 onTaps 内部调用 setState 方法，或者只是将按钮移出站点，或者在构建方法开始时将另一个布尔值设置为构建方法之外的布尔值，但是没有任何效果。

预先感谢您的回答。

Answer 1

我也是 Flutter 的新手，但是当我遇到类似情况时，我用 ValueListenableBuilder 包装了小部件并将布尔值设置为 ValueNotifier。 它对我有用。

class MapComponent extends StatefulWidget {
  const MapComponent({Key? key}) : super(key: key);

  @override
  State<MapComponent> createState() => MapSampleState();
}

class MapSampleState extends State<MapComponent> {


  ...

  @override
  void initState() {
    // TODO: implement initState

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    
    ValueNotifier<bool> _focusLocationVisible = ValueNotifier(true);

    return FutureBuilder(
      
        future: _getDataFuture, 
        builder: (BuildContext jsoncontext, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) {
            return (const Center(child: CircularProgressIndicator()));
          } else {
            ... 
          }

          var size = MediaQuery.of(context).size;

          return ValueListenableBuilder(
                              valueListenable: _focusLocationVisible,
                              builder: (context, _value, _) {return Stack(
            children: [
              FlutterMap(
                mapController: mapController,
                layers: [
                  TileLayerOptions(...),
                  LocationMarkerLayerOptions(),
                  MarkerClusterLayerOptions(

                    ...

                    onMarkerTap:(Marker marker)=>{

                      _focusLocationVisible.value = false

                    },

                    popupOptions: PopupOptions(
                        popupController: _popupController,
                        popupSnap: PopupSnap.mapBottom,
                        popupAnimation: PopupAnimation.fade(
                            duration: Duration(milliseconds: 200)),
                        popupBuilder: (_, marker) {
                          
                          return DraggableScrollableSheet(...);
                        }),
                  ),
                ],




                options: MapOptions(
                  onTap: (TapPosition, LatLang) =>
                      {
                        _popupController.hideAllPopups(),
                        _focusLocationVisible.value = false,
                        },

                  ...

                  plugins: [
                    MarkerClusterPlugin(),
                    LocationMarkerPlugin(
                      //centerOnLocationUpdate: _centerOnLocationUpdate,
                      centerCurrentLocationStream: _centerCurrentLocationStreamController.stream,
                      centerAnimationDuration: Duration(milliseconds: 500),
                    )
                  ],
                ),

              ),
             if(_focusLocationVisible == true)  
              Positioned(
                right:  20,
                bottom: 40,

                //right:  _buttonrightPosition,
                //bottom: _buttonbottomPosition,
                  child: AnimatedOpacity(
                    opacity: _focusLocationVisible ? 1.0 : 0.0,
                    duration: const Duration(milliseconds: 500),
                    child: FloatingActionButton(
                          backgroundColor: Theme.of(context).bottomAppBarColor,
                          heroTag: null,
                          onPressed: () async {
                            // Location location = Location();
                            // LocationData curloc = await location.getLocation();
                            _centerCurrentLocationStreamController.add(16);
                            //mapController.move(LatLng(curloc.latitude!, curloc.longitude!),16);
                          },
                          child: const Icon(
                            Icons.my_location,
                            color: Colors.white,
                          ),
                        ),
                      
                  ),
              ),

            ],
          );});
        });
  }
}

希望这对你也有效。

Answer 2

请注意，setState 可能会重新加载 Futurebuilder。 按照建议，积极使用组合小部件。 ValueNotifier 适用于小型项目，但对于大型项目，您的代码将难以理解。

class MapComponent extends StatelessWidget {
  const MapComponent({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return FutureBuilder(

        future: _getDataFuture,
        builder: (BuildContext jsoncontext, AsyncSnapshot snapshot) {
          if (snapshot.connectionState = ConnectionState.waiting) {
            return (const Center(child: CircularProgressIndicator()));
          } else if (!snapshot.hasData) {
            return Text("No data");
          }


          final data = snapshot.data;

          var size = MediaQuery
              .of(context)
              .size;

          return BuildStack(yourData: data);
        });
  }

}


class BuildStack extends StatefulWidget {
  final dynamic yourData;

  const BuildStack({Key? key, required this.yourData}) : super(key: key);

  @override
  _BuildStackState createState() => _BuildStackState();
}

class _BuildStackState extends State<BuildStack> {

  late bool _focusLocationVisible = true;

  @override
  void initState() {
    super.initState();
    _focusLocationVisible = true;
  }


  void setFocusButton() {
    setState(() {
      _focusLocationVisible = !_focusLocationVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FlutterMap(
          mapController: mapController,
          layers: [
            TileLayerOptions(...),
            LocationMarkerLayerOptions(),
            MarkerClusterLayerOptions(


              onMarkerTap: (Marker marker) =>
                  setFocusButton()
              ,

              popupOptions: PopupOptions(
                  popupController: _popupController,
                  popupSnap: PopupSnap.mapBottom,
                  popupAnimation: PopupAnimation.fade(
                      duration: const Duration(milliseconds: 200)),
                  popupBuilder: (_, marker) {
                    return DraggableScrollableSheet(...);
                  }),
            ),
          ],


          options: MapOptions(
            onTap: (TapPosition, LatLang) =>
            {
              _popupController.hideAllPopups(),
              setFocusButton(),
            },


            plugins: [
              MarkerClusterPlugin(),
              LocationMarkerPlugin(
                //centerOnLocationUpdate: _centerOnLocationUpdate,
                centerCurrentLocationStream: _centerCurrentLocationStreamController
                    .stream,
                centerAnimationDuration: const Duration(
                    milliseconds: 500),
              )
            ],
          ),

        ),
        if(_focusLocationVisible)
          Positioned(
            right: 20,
            bottom: 40,

            //right:  _buttonrightPosition,
            //bottom: _buttonbottomPosition,
            child: AnimatedOpacity(
              opacity: _focusLocationVisible ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 500),
              child: FloatingActionButton(
                backgroundColor: Theme
                    .of(context)
                    .bottomAppBarColor,
                heroTag: null,
                onPressed: () async {
                  // Location location = Location();
                  // LocationData curloc = await location.getLocation();
                  _centerCurrentLocationStreamController.add(16);
                  //mapController.move(LatLng(curloc.latitude!, curloc.longitude!),16);
                },
                child: const Icon(
                  Icons.my_location,
                  color: Colors.white,
                ),
              ),

            )
            ,
          )
        ,

      ]
      ,
    );
  }
}