如何解决颤抖：在BottomNavigationBar中更新currentIndex时，PageView的性能较慢但如果我不更新currentIndex，则没有滞后
我正在使用包含以下内容的支架创建应用程序：
- 正文中的
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,curve: Curves.ease);
}
版本一样：（
关于造成延迟的原因以及如何解决此问题的任何想法？我真的不知道还能尝试什么。
解决方法
好吧，所以我想我设法解决了这个问题，同时还学习了关于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}}。这似乎是避免不必要的重绘的唯一方法（显然，您的代码将更简洁，更易于调试）。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。