每次我在 tabnavigator 中更改页面时，Flutter googlemaps 都会重新加载答案

【问题标题】：Flutter googlemaps reloads everytime I change page in tabnavigator每次我在 tabnavigator 中更改页面时，Flutter googlemaps 都会重新加载
【发布时间】：2019-05-16 13:25:40
【问题描述】：

您好，我正在尝试在我的应用程序中使用 Flutter 和新的 googlemaps 插件。我的问题是，每次我在 tabnav 中更改页面时，它都会重新加载 googlemaps 小部件。我尝试使用 AutomaticKeepAliveClientMixin 但这没有帮助。我会继续努力解决这个问题，但是感谢您的帮助，或者如果有人知道我做错了什么？谢谢！

这是我的代码：

import 'package:flutter/material.dart';
import 'package:restapoints/pages/pages.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    MapPage(),
    QrPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Flutter App'),
      ),
      body: _children[_currentIndex], // new
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped, // new
        currentIndex: _currentIndex, // new
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('Messages'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Profile'))
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

地图页面：

    class MapPage extends StatefulWidget {
      @override
      _MapPageState createState() => _MapPageState();
    }

    class _MapPageState extends State<MapPage>
        with AutomaticKeepAliveClientMixin<MapPage> {

  @override
  Widget build(BuildContext context) {
    return Container(
      ///Getting size of the screen from [MediaQuery] inherited widget.
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: <Widget>[
          GoogleMap(
            onMapCreated: _onMapCreated,
            options: GoogleMapOptions(
              compassEnabled: true,
              mapType: MapType.normal,
              trackCameraPosition: true,
            ),
          ),

          ///If not enabled don't show ListView of places.
          toggleListView
              ? Positioned(
                  top: MediaQuery.of(context).size.height / 2,
                  left: 10,
                  child: Container(
                      height: MediaQuery.of(context).size.height / 4,
                      width: MediaQuery.of(context).size.width,
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        padding: EdgeInsets.all(5.0),
                        children: _places.map((place) {
                          return _placeCard(place);
                        }).toList(),
                      )),
                )
              : Container()
        ],
      ),
    );

  @override
  bool get wantKeepAlive => true;
}

【问题讨论】：

这是类似的东西：stackoverflow.com/questions/52598900/…
stackoverflow.com/questions/52598900/… 解决了我的问题！ “您需要使用导航器包装每个根页面（按下底部导航项时看到的第一页）并将它们放入堆栈中。”

标签： flutter

【解决方案1】：

我没有将页面设置为像 MapPage 那样的 StatefulWidget，而是在 IndexedStack 中添加了 Widget，以防止重新构建页面。虽然这种方法的缺点是如果在 Stack 上添加了很多页面，页面可能需要一些时间来构建。

【讨论】：