flutter - TabBarView或BottomNavigationBar的IndexedStack-Flutter

Question

flutter 底部导航栏的最佳方法是什么？

根据Getting to the Bottom of Navigation in Flutter的介绍，当用户更改选项卡时，flutter团队使用IndexedStack和Offstage来显示小部件，但是我看到了另一种方法，即TabBarView通过简单的幻灯片动画在小部件之间进行切换，并保持每个小部件的滚动状态

那么IndexedStack + Offstage和TabBarView有什么区别？更改当前选项卡的最佳方法是我应该使用flutter_bloc之类的东西还是仅使用setState()？

Answer 1

概述
好吧，有很多方法可以在Flutter中实现BottomNavigationBar。
但是，使用IndexedStack方法将在开始时创建BottomNavigationBar的所有屏幕。可以使用TabBarView修复此问题。
这是我使用BottomNavigationBar和CupertinoTabBar在我的应用程序中实现PageView的方式，因为它一开始只会显示一个屏幕。并且也使用AutomaticKeepAliveMixin，因为它不会让屏幕再次被创建。

关键点

和PageView一起使用PageController，通过它您可以轻松地在屏幕之间切换。

AutomaticKeepAliveClientMixin不允许重新创建屏幕，因此无需使用IndexedStack。

更改Provider时，使用Consumer和CupertinoTabBar仅重新创建currentIndex。而不是使用setState()，因为它将重新创建整个屏幕，让所有小部件都可以重新构建。但是这里是使用Provider仅重新创建TabBar。

程式码范例

HomePage (BottomNavigtionBar)

class HomeScreen extends StatefulWidget {
  @override
 _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
PageController _pageController;

@override
void initState() {
  _pageController = PageController();
  super.initState();
}

@override
void dispose() {
  _pageController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
return  Scaffold(
    // Wrapping the CupertinoTabBar in Consumer so that It only get 
    // recreated.
    bottomNavigationBar: Consumer<HomeVM>(
      builder: (context, model, child) {
        return CupertinoTabBar(
            backgroundColor: Colors.white10,
            currentIndex:  model.currentPage,
            onTap: (index) {
                index == model.currentPage
                ? print('same screen')
                : _pageController.jumpToPage(
                    index,
                  );
                 model.changePage(index);
                }, 
            items: bottomNavItems);
      },
    ),
    body:ChangeNotifierProvider(
           create: (_) => locator<HelpVM>(),
           child: SafeArea(
                    top: false,
                    child: PageView(
                    controller: _pageController,
                    physics: NeverScrollableScrollPhysics(),
                    children: <Widget>[
                          FrontScreen(),
                          WorkRootScreen(),
                          HelpScreen(),
                          AccountScreen(),
                     ],
                   ),
          ),
       ),
  );
 }

  const List<BottomNavigationBarItem> bottomNavItems = 
   <BottomNavigationBarItem>[
     BottomNavigationBarItem(
       icon: const Icon(
       FontAwesomeIcons.home,
     ),
   ),
    //...... bottomNavigationBarItems 
  ];

}

HomeVM (Using Provider to change the index and recreate only TabBar using Consumer)

class HomeVM extends ChangeNotifier {
 int _currentPage = 0;

 int get currentPage => _currentPage;

 void changePage(int index) {
   this._currentPage = index;
   notifyListeners();
 }
}

FrontScreen (Here we are using AutomaticKeepAliveClientMixin to retain the state by not recreating the Widget)

   class FrontScreen extends StatefulWidget {
    @override
      _FrontScreenState createState() => _FrontScreenState();
    }
    
    class _FrontScreenState extends State<FrontScreen>
        with AutomaticKeepAliveClientMixin {
      @override
      Widget build(BuildContext context) {
      // VIMP to Add this Line.
        super.build(context);
        return SafeArea(
         // Your Screen Code   
        );
      }
    
      @override
      bool get wantKeepAlive => true;
   }