google-maps - Flutter:如何保持 Google Map 的小部件不变？

Question

我正在使用 Google Maps for Flutter小部件。在我的应用程序中， map 是通过 BottomNavigationBar 的选项卡之一显示的。

我有以下问题:

1. 用户在 map 的标签上
2. 用户更改标签(通过点击另一个标签)
3. [问题] 当用户在 map 的选项卡上返回时 map 重绘。

我想在用户离开 map 选项卡时保持 map 原样，以便他稍后返回时可以继续使用它。

试图:

• 使用 PageStorage - 没有成功。
• 制作 map 状态的 Singletone 之类的东西 - 没有成功。
• 使用 AutomaticKeepAliveClientMixin (saw here)，这看起来很有希望，但仍然没有成功。

(我承认我可能做错了什么)

最后一次尝试的代码:

class MapScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MapScreenState();
}

class MapScreenState extends State<MapScreen> with AutomaticKeepAliveClientMixin {
  GoogleMapController mapController;

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
        appBar: AppBar(
          title: const Text("Map"),
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
        )
    );
  }

  void _onMapCreated(GoogleMapController controller) {
      mapController = controller;
      updateKeepAlive();
  }
}

所以，我只需要一种方法来保持 MapScreen 处于事件状态并保持不变，或者以某种方式存储其状态并在用户返回 MapScreen 时恢复它。或者其他可以解决问题的方法。

Answer 1

使用 IndexedStack

例如:

Class _ExamplePageState extends State<ExamplePage> {
  int _bottomNavIndex = 0;

  final List<Widget> _children = [
    WidgetOne(),
    WidgetTwo(),
    GoogleMap(),
  ]

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _bottomNavIndex,
        children: _children,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _bottomNavIndex,
        onTap: (index) {
          if (_bottomNavIndex == index) return;
          setState(() {
            _bottomNavIndex = index;
          });
        }
        items: [ ... ]
      ),
    );
  }
}