Flutter 在帶有 GoogleMaps 屏幕的 PageView 上出現錯誤

Question

我在 Flutter 中有一個特殊問題，這種情況是，在帶有 appbar、body 和 bottomBar 的頁面中，在 body 中我有一個包含 3 頁的頁面視圖。 第一個帶有 map，第二個和第三個帶有元素列表。 例如，如果將頁面更改為第二 -> 第三，一切正常，但是當我使用 GoogleMap 頁面執行此操作時，從一頁跳轉到下一頁后，設備中的所有屏幕都會變白一秒鍾，就像重建一樣。

好像當我將頁面從 map 頁面更改為另一個頁面時，GoogleMaps 會重建所有頁面。 對此有任何想法嗎？

謝謝：

Doctor: 
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Versión 10.0.19042.1415], locale es-ES)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1)
[√] VS Code (version 1.63.2)
[√] Connected device (3 available)

'''

class _HomeState extends State<PageViewLocalization>
    with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    //WidgetsBinding.instance!.addObserver(this);
    super.build(context);
    return Scaffold(
      appBar: appBar(widget._),
      backgroundColor: Styles.principalBackGroundColor,
      body: PageView(
        physics: const NeverScrollableScrollPhysics(),
        controller: widget._.localizationPageViewController,
        children: [
          mapExplorationPage(widget._),
          allMapGoogleMapsObservationsPage(widget._),
          allMyGoogleMapsObservationsPage(widget._),
        ],
      ),
    );
  }
appBar(HomeController _) {
    return AppBar(
      automaticallyImplyLeading: false,
      actions: [
        Center(
          child: Container(
            padding: const EdgeInsets.only(top: 12),
            margin: const EdgeInsets.only(bottom: 10),
            child: CustomSlidingSegmentedControl(
              fixedWidth: 60,
              padding: 8,
              children: {
                0: Icon(
                  Icons.map_outlined,
                  size: 14,
                  color: _.currentLocalizationPage == 0
                      ? _.enabledCustomSlidingSegmentedControl
                          ? Styles.minkaPrincipalColor
                          : Colors.grey
                      : Colors.grey,
                ),
                1: Icon(
                  Icons.list,
                  size: 14,
                  color: _.currentLocalizationPage == 1
                      ? Styles.minkaPrincipalColor
                      : Colors.grey,
                ),
                2: Icon(
                  Icons.person_outline,
                  size: 14,
                  color: _.currentLocalizationPage == 2
                      ? Styles.minkaPrincipalColor
                      : Colors.grey,
                ),
              },
              onValueChanged: (int value) async {
                if (value != 0 && _.boundsInicialized == false) {
                  _.boundsInicialized = true;
                  _.manager!.onCameraMove(_.cameraPositionOnInicializeMap);
                  await _.showItemsInTheMapCamera(
                      _.cameraPositionOnInicializeMap,
                      _.mapControllerCompleter);
                }

                if (_.enabledCustomSlidingSegmentedControl) {
                  _.currentLocalizationPage = value;
                  _.update();
                  _.localizationPageViewController.jumpToPage(
                    _.currentLocalizationPage,
                  );
                  // await _.localizationPageViewController.animateToPage(
                  //     _.currentLocalizationPage,
                  //     curve: Curves.easeIn,
                  //     duration: Duration(milliseconds: 500));
                }
              },
            ),
          ),
        ),
        const SizedBox(width: Styles.paddingValue / 2)
      ],
      backgroundColor: Styles.principalBackGroundColor,
      elevation: Styles.defaultElevation,
      title: Container(
        margin: const EdgeInsets.only(left: Styles.paddingValue / 2),
        child: Align(
          alignment: Alignment.centerLeft,
          child: SvgPicture.asset(
            "assets/images/ic_1231232.svg",
            width: 108,
            height: 30,
          ),
        ),
      ),
    );
  }

 mapExplorationPage(HomeController _) {
    Completer<GoogleMapController> _passInfoCompleter = Completer();

    return SizedBox(
      child: GoogleMap(
        myLocationButtonEnabled: true,
        zoomControlsEnabled: true,
        mapType: MapType.hybrid,
        initialCameraPosition: _.cameraPositionOnInicializeMap,
        onMapCreated: (GoogleMapController controller) async {
          if (!_.mapControllerCompleter.isCompleted) {
            mapController = controller;
            _.mapControllerCompleter.complete(controller);
            _.manager!.setMapId(controller.mapId);
            await _.showItemsInTheMapCamera(
                _.cameraPositionOnInicializeMap, _.mapControllerCompleter);
          } else {
            _passInfoCompleter.complete(controller);
            _.mapControllerCompleter = _passInfoCompleter;
            _.manager!.setMapId(controller.mapId);
          }
          // _.zoomEfect(); TODO ARREGLAR MAP OTRA PUTA VEZ
        },
        myLocationEnabled: true,
        markers: _.markers,
        onCameraIdle: _.manager!.updateMap,
        onCameraMove: (position) async {
          if (_.mapControllerCompleter.isCompleted) {
            if (_.markers.isEmpty) {
              _.fillAllMarkers();
            }
            _.manager!.onCameraMove(position);
            await _.showItemsInTheMapCamera(position, _.mapControllerCompleter);
          }
        },
      ),
    );
  }

'''

Answer 1

嘗試將您的mapExplorationPage和allMyGoogleMapsObservationsPage和allMapGoogleMapsObservationsPage小部件分離到單獨的小部件中，並將AutomaticKeepAliveClientMixin添加到每個小部件中，因為它應該添加到頁面視圖小部件而不是父主頁小部件

1)

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

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

class _MapExplorationPageState extends State<MapExplorationPage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    // ...
  }

  @override
  bool get wantKeepAlive => true;
}

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

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

class _AllMapGoogleMapsObservationsPageState extends State<AllMapGoogleMapsObservationsPage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    // ...
  }

  @override
  bool get wantKeepAlive => true;
}

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

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

class _AllMyGoogleMapsObservationsPageState extends State<AllMyGoogleMapsObservationsPage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    // ...
  }

  @override
  bool get wantKeepAlive => true;
}

旁注，強烈建議將小部件分成它們自己的小部件，而不是創建構建方法，以提高性能和代碼可讀性，因此請始終嘗試這樣做。 查看 Flutter 中有關此問題的視頻