首页 > 解决方案 > 使用 PageView 在 BottomNaviationBar 中使用 GoogleMap 小部件滚动问题以保持状态

问题描述

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: _children,
        controller: pageController,
        onPageChanged: onPageChanged,
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        backgroundColor: Colors.grey[100],
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.navigation),
            label: 'Track',
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.settings),
            label: 'Settings',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          )
        ],
      ),
    );
  }

  void onTabTapped(int value) {
    pageController.jumpToPage(value);
  }

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

嗨,我在下面的代码图像中附加了我的简单颤振应用程序的有状态小部件的构建方法。我正在使用底部导航栏,并希望我的小部件在底部页面之间切换时保留在树中。因此,我实现了 AutomaticKeepAliveMixin 以及页面控制器和页面主体,以使状态保持不变。现在我的问题是,

  1. 我的第一页是显示跟踪信息的谷歌地图小部件。由于页面浏览,当我尝试通过向目的地方向滑动来查看地图上的不同位置时,有时在地图上从右向左滑动会导致页面浏览触发页面切换
  2. 如果我删除 pageview 以使地图按预期工作,那么状态的持久性就消失了,因为根据文档,我应该将脚手架的主体包裹在 PageView 小部件中,以用于 AutomaticKeepAliveMixin 工作。

我的应用截图

现在我的问题是我如何实现两者兼得的东西?我被困住了。我尝试实现其他状态持久化技术,如索引堆栈和 pagekeystorage 但没有运气:( 任何帮助将不胜感激!谢谢!

垂直滚动有效,但是当我尝试在我的地图中横向滚动时,页面浏览量占优势并且只是滚动到新页面,如下所示: 问题 GIF

标签: flutterflutter-pageviewgoogle-maps-flutterflutter-bottomnavigation

解决方案


PageView 有一个物理属性,您可以使用它来控制它如何滚动以响应用户在其上滑动。如果您分配 NeverScrollableScrollPhysics(),它将无法滚动。


推荐阅读