Flutter：在構造函數中調用 setState()

Question

我是 Flutter 的新手，在嘗試顯示地圖和實現一些 tilelayers 時遇到了問題。

該應用程序有一個Drawer實現，我想在其中啟用/禁用和清除圖塊緩存。

我已經獲取了一些運行良好的示例，所以我知道tiling效果很好，但是在這里我遇到了一個問題，我想從抽屜小部件中調用 MyWorldMap 有狀態小部件的成員函數，據我所知，我現在被setState() called in constructor錯誤消息中setState() called in constructor的setState() called in constructor所困擾。

您有什么建議可以幫助或指導我走上正確的道路嗎？

筆記 ！！ 記得根據： https : //codelabs.developers.google.com/codelabs/google-maps-in-flutter?hl=en&continue=https% 3A%2F%2Fcodelabs.developers.google.com 添加自己的 MAP API KEY %2F#3

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:http/http.dart' as http;


void main() {
  runApp(const MyApp());
}

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


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:"My App test",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(title: "My World Map")
    );
  }
}

class HomePage extends StatefulWidget{

  final String title;

  HomePage({Key? key, required this.title}):super(key: key);

  @override
  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage>{
  @override
  void initState(){
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: MainDrawer(),
      body: MyWorldMap(),
    );

  }


}

class MainDrawer extends StatefulWidget{

  @override
  State<StatefulWidget> createState() => MainDrawerState();
}

class MainDrawerState extends State<MainDrawer>{

  @override
  Widget build(BuildContext context) {

    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          const DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text("My World Map"),
          ),
          ListTile(
            title: const Text ("Add tile overlay"),
            onTap: () => addTileOverlay(),
          ),
          ListTile(
              title: const Text ("Clear tile overlay cache"),
              onTap: () => clearTileCache(),
          ),
          ListTile(
              title: const Text ("Remove tile overlay"),
              onTap: () => removeTileOverlay(),
          ),

        ],
      ),
    );

  }

  void addTileOverlay(){
    print("Attempting to add tile overlay");
    MyWorldMap().addTileOverlay();
  }

  void clearTileCache(){
    print("Attempting clear tile cache");
    MyWorldMap().clearTileCache();
  }

  void removeTileOverlay(){
    print("Attempting removing tile overlay");
    MyWorldMap().removeTileOverlay();
  }

}

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

  addTileOverlay() => createState()._addTileOverlay();
  removeTileOverlay() => createState()._removeTileOverlay();
  clearTileCache() => createState()._clearTileCache();

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

class _MyWorldMapState extends State<MyWorldMap>
{
  TileOverlay? _tileOverlay;
  late GoogleMapController _mapController;
  final LatLng _initialCameraPosition = const LatLng(61.9026,6.7003); //Change with your location

  //You need to change maps API key in AndroidManifest.xml

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

  Future<void> _onMapCreated(GoogleMapController controller) async {
    _mapController = controller;
    setState(() {
      //Do stuff ?
    });
  }

  @override
  Widget build(BuildContext context) {
    Set<TileOverlay> overlays = <TileOverlay>{
      if(_tileOverlay != null) _tileOverlay!,
    };

    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: _initialCameraPosition,
        zoom:15,
      ),
      myLocationEnabled: false,
      tileOverlays: overlays,
    );

  }

  void _addTileOverlay()
  {
    final TileOverlay tileOverlay = TileOverlay(
      tileOverlayId: TileOverlayId("My World Map Overlay"),
      tileProvider: MyWorldMapTileProvider(),
    );
    setState((){   //The code fails here when pushing the 'Add tile overlay button' !!
      _tileOverlay = tileOverlay;
    });
  }

  void _clearTileCache()
  {
    if(_tileOverlay != null){
      _mapController.clearTileCache(_tileOverlay!.tileOverlayId);
    }
  }

  void _removeTileOverlay()
  {
    setState(() {
      _tileOverlay = null;
    });
  }

}

class MyWorldMapTileProvider implements TileProvider {

  @override
  Future<Tile> getTile(int x, int y, int? zoom) async {

    String path = 'https://maptiles1.finncdn.no/tileService/1.0.1/norortho/$zoom/$x/$y.png';

    http.Response response = await http.get(
      Uri.parse(path)
    );

    return Tile(x,y,response.bodyBytes);
  }

}

Answer 1

似乎您在build方法完成構建小部件之前使用setState 。 我建議在構建完成后使用setState ，這樣：

       WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
          setState(() {
            // do stuff;
          });
        });

Answer 2

並不是說我是一個真正的顫振專業人士，但我認為問題可能出在這里：

addTileOverlay() => createState()._addTileOverlay();    
removeTileOverlay() => createState()._removeTileOverlay();
clearTileCache() => createState()._clearTileCache();

每次在MyWorldMap小部件中調用這些方法之一時，您都會創建一個新狀態，我認為這不是正確的行為。

如果您想從另一個 Widget 編輯 Widget 狀態，您應該嘗試使用鍵：我認為任何有狀態的 Widget 都可以在構造函數中使用一個key參數，該參數可以依次用於從其他小部件更改其狀態。 我會試着寫一個簡單的例子。

class Parent extends StatelessWidget {
final keyA = GlobalKey();
final keyB = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(children: [
      ChildA(keyA),
      ChildB(keyB, keyA),
    ]),
  );
  }
}

class ChildA extends StatefulWidget {
 const ChildA(GlobalKey key) : super(key: key);

 @override
 State<StatefulWidget> createState() => ChildAState();
}

class ChildAState extends State<ChildA> {
 int counter = 0;
 @override
 Widget build(BuildContext context) {
  return Text("Child A count: $counter");
 }

 void increaseCounter(){
   setState(() {
     counter++;
   });
 }
}

class ChildB extends StatefulWidget {
 final GlobalKey childAKey;
 const ChildB(GlobalKey key, this.childAKey) : super(key: key);

 @override
 State<StatefulWidget> createState() => ChildBState();
}

class ChildBState extends State<ChildB> {
  @override
  Widget build(BuildContext context) {
  return TextButton(
    child: const Text("Press here"),
    onPressed: () {
      (widget.childAKey.currentState as ChildAState).increaseCounter();
    },
  );
 }
}

Answer 3

在@il_boga 引導我找到答案后（所有功勞都歸功於他），我將在此處發布工作代碼：

我將TileOverlay創建移動到initState類的_MyWorldMapState ，並添加了一個緩沖的“圖層”，這樣我就可以通過在刪除時將_mapTileOverlay設置為 null 來打開/關閉圖層，並在添加疊加層時將其設置回_bufferedMapTileOverlay 。

此外，我創建了兩個 GlobalKeys（實際上不知道為什么我實際上需要drawerKey ，因為我從來沒有在任何地方mapKey引用它......， mapKey很明顯）

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:"My App test",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(title: "My World Map")
    );
  }
}

class HomePage extends StatefulWidget{
  final String title;

  const HomePage({Key? key, required this.title}):super(key: key);

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

class _HomePageState extends State<HomePage>{

  final drawerKey = GlobalKey();
  final mapKey = GlobalKey();

  @override
  void initState(){
    print("_HomePageState(): initState");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: MainDrawer(drawerKey: drawerKey, mapKey: mapKey,),
      body: MyWorldMap(mapKey: mapKey,),
    );
  }
}

class MainDrawer extends StatefulWidget{

  final GlobalKey mapKey;

  const MainDrawer({required GlobalKey drawerKey, required this.mapKey}) : super(key: drawerKey);

  @override
  State<StatefulWidget> createState() => MainDrawerState();
}

class MainDrawerState extends State<MainDrawer>{



  @override
  Widget build(BuildContext context) {

    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          const DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text("My World Map"),
          ),
          ListTile(
            title: const Text ("Add tile overlay"),
            onTap: () => addTileOverlay(),
          ),
          ListTile(
              title: const Text ("Clear tile overlay cache"),
              onTap: () => clearTileCache(),
          ),
          ListTile(
              title: const Text ("Remove tile overlay"),
              onTap: () => removeTileOverlay(),
          ),

        ],
      ),
    );

  }

  void addTileOverlay(){
    print("Attempting to add tile overlay");
    //MyWorldMap().addTileOverlay();
    (widget.mapKey.currentState as _MyWorldMapState)._addTileOverlay();
  }

  void clearTileCache(){
    print("Attempting clear tile cache");
    //MyWorldMap().clearTileCache();
    (widget.mapKey.currentState as _MyWorldMapState)._clearTileCache();
  }

  void removeTileOverlay(){
    print("Attempting removing tile overlay");
    //MyWorldMap().removeTileOverlay();
    (widget.mapKey.currentState as _MyWorldMapState)._removeTileOverlay();
  }

}

class MyWorldMap extends StatefulWidget{
  const MyWorldMap({required GlobalKey mapKey}) : super(key: mapKey);

  //addTileOverlay() => createState()._addTileOverlay();
  //removeTileOverlay() => createState()._removeTileOverlay();
  //clearTileCache() => createState()._clearTileCache();

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

class _MyWorldMapState extends State<MyWorldMap>
{
  TileOverlay? _bufferedMapTileOverlay; //intermediate, which actually holds the overlay
  TileOverlay? _mapTileOverlay; //value which connects to the map
  late GoogleMapController _mapController;
  final LatLng _initialCameraPosition = const LatLng(61.9026,6.7003); //Change with your location

  //You need to change maps API key in AndroidManifest.xml

  @override
  void initState(){
    print("_MyWordMapState(): initState");
    super.initState();

    final TileOverlay newMapTileOverlay = TileOverlay(  //Inits the tileOverlay
      tileOverlayId: const TileOverlayId("My World Map Overlay"),
      tileProvider: MyWorldMapTileProvider(),
    );

    _bufferedMapTileOverlay = newMapTileOverlay;
  }

  Future<void> _onMapCreated(GoogleMapController controller) async {
    _mapController = controller;
    setState(() {
      //Do stuff ?
    });
  }

  @override
  Widget build(BuildContext context) {
    Set<TileOverlay> overlays = <TileOverlay>{  //connect a set of overlays (here just one)
      if(_mapTileOverlay != null) _mapTileOverlay!,
    };

    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: _initialCameraPosition,
        zoom:15,
      ),
      myLocationEnabled: false,
      tileOverlays: overlays, //connect to the set of overlays (I have only one (see above))
    );

  }

  void _addTileOverlay()
  {
    setState((){
      _mapTileOverlay = _bufferedMapTileOverlay;
    });
  }

  void _clearTileCache()
  {
    if(_mapTileOverlay != null){
      print("Clearing tile cache");
      _mapController.clearTileCache(_mapTileOverlay!.tileOverlayId);
    }
  }

  void _removeTileOverlay()
  {
    setState(() {
      _mapTileOverlay = null;
    });
  }

}

class MyWorldMapTileProvider implements TileProvider {

  @override
  Future<Tile> getTile(int x, int y, int? zoom) async {

    String path = 'https://maptiles1.finncdn.no/tileService/1.0.1/norortho/$zoom/$x/$y.png';

    http.Response response = await http.get(
      Uri.parse(path)
    );

    return Tile(x,y,response.bodyBytes);
  }

}