Question

我正在使用包含以下内容的支架创建应用程序：

正文中的FutureBuilder，在加载数据时会创建PageView作为其子项。
与BottomNavigationBar同步的PageView，以实现更直观的导航。

从功能上讲，一切正常。我可以在页面之间左右滑动，并且currentIndex在BottomNavigationBar中正确更新，并且如果我点击BottomNavigationBar元素，则PageView会动画到正确的页面如预期的那样。

但是，即使在“个人档案”模式下，在页面之间切换时，性能也确实很差。

经过大量调查，我确认只有在更新currentIndex的{{1}}时才会出现延迟。

如果我不更新BottomNavigationBar，则在页面之间切换时（在BottomNavigationBar上滑动和在PageView元素上点击时），动画都将保持非常平滑。

我还可以确认，在使用BottomNavigationBar和使用setState时，情况完全相同。我真的希望只是Provider方法效率低下...但没有运气：（

对于setState而言，这就是我正在做的事情：

在setState上：

PageView

在BottomBarNavigation上：

onPageChanged: (page) {
  setState(() {
    _selectedIndex = page;
  });
}

及以下：

onTap: _onTappedBar,
currentIndex: _selectedIndex

如果我同时注释掉两个void _onTappedBar(int value) { _pageController.animateToPage(value, duration: Duration(milliseconds: 500), curve: Curves.ease); setState(() { _selectedIndex = value; }); }方法，该应用程序将再次变得光滑，并且我也可以正确使用setState-它只是不会更新所选项目。

足够有趣的是，如果我只注释掉两个BottomNavigationBar方法（setState和_selectedIndex = page;）中的行，但是将这些方法保留在那里，则该应用仍然滞后，即使_selectedIndex = value;方法完全为空，并且没有更新任何内容... ??

这是setState版本：

在Provider上：

PageView

在onPageChanged: (page) { Provider.of<BottomNavigationBarProvider>(context, listen: false).currentIndex = page; }上：

BottomBarNavigation

及以下：

onTap: _onTappedBar,
currentIndex: Provider.of<BottomNavigationBarProvider>(context).currentIndex,

如前所述，就像void _onTappedBar(int value) { Provider.of<BottomNavigationBarProvider>(context, listen: false).currentIndex = value; pageController.animateToPage(value, duration: Duration(milliseconds: 500), curve: Curves.ease); }版本一样：（

关于造成延迟的原因以及如何解决此问题的任何想法？我真的不知道还能尝试什么。

Answer 1

好吧，所以我想我设法解决了这个问题，同时还学习了关于Flutter的宝贵经验！

我处于setState / Provider困境的正确轨道上-如果您 do 需要使用Provider（或其他状态管理解决方案），希望避免重建整个页面。

但是，这还不够。

为了利用该实现的模块性，您还需要在主窗口小部件外部提取相关窗口小部件（在这种情况下，整个BottomNavigationBar）。如果您不这样做，即使只有一个小部件正在侦听Provider通知，主页上的所有内容似乎仍将得到重建。

这就是我的root_screen的{{1}}方法的结构（为便于阅读，简化了正文内容）：

build

请注意，如何在此Widget build(BuildContext context) { return Scaffold( body: PageView( controller: _pageController, children: <Widget>[ HomeScreen(), PerformanceScreen(), SettingsScreen(), ], onPageChanged: (page) { Provider.of<BottomNavigationBarProvider>(context, listen: false).currentIndex = page; }, ); bottomNavigationBar: MyBottomNavigationBar(onTapped: _onTappedBar), ); }中不再定义bottomNavigationBar:参数。相反，我在一个单独的Dart文件中创建了一个新类（一个root_screen），该文件使用一个StatelessWidget函数作为参数，并在此处实例化它。

所说的onTapped函数是在_onTappedBar方法正下方的root_screen上定义的：

build

这是包含新void _onTappedBar(int value) { Provider.of<BottomNavigationBarProvider>(context, listen: false).currentIndex = value; _pageController.animateToPage(value, duration: Duration(milliseconds: 500), curve: Curves.ease); }类的单独的Dart文件：

MyBottomNavigationBar

为了完整性（并且因为我绝对需要知道），我尝试再次使用class MyBottomNavigationBar extends StatelessWidget { @override const MyBottomNavigationBar({ Key key, @required this.onTapped, }) : super(key: key); final Function onTapped; Widget build(BuildContext context) { return BottomNavigationBar( items: [ BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')), BottomNavigationBarItem( icon: Icon(Icons.trending_up), title: Text('Performance')), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text('Settings')), ], onTap: onTapped, currentIndex: Provider.of<BottomNavigationBarProvider>(context).currentIndex, ); } }方法，同时将setState保留在其新的单独文件中。我想了解一下，仅仅提取小部件是否足以解决问题，或者无论如何仍然需要使用状态管理解决方案。

结果……还不够！即使将BottomNavigationBar小部件提取到其自己的类文件中，使用setState的性能也再次令人恐惧。

因此，最重要的是，为了保持应用程序的效率和动画的流畅性，请记住提取小部件并尽可能地模块化Flutter代码，并使用状态管理解决方案代替{ {1}}。这似乎是避免不必要的重绘的唯一方法（显然，您的代码将更简洁，更易于调试）。

颤抖：在BottomNavigationBar中更新currentIndex时，PageView的性能较慢（但如果我不更新currentIndex，则没有滞后）

1 个答案: