当我通过单击脚手架内的平面按钮导航到其他页面时，底部导航栏消失

Question

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyNavigationBar(),
    );
  }
}

class MyNavigationBar extends StatefulWidget {
  @override
  _MyNavigationBarState createState() => _MyNavigationBarState();
}

class _MyNavigationBarState extends State<MyNavigationBar> {

  int _currentIndex = 0;

// all pages 
  final List<Widget> _children = [
    ListScreen(),
    HomaPage(),
    FourthScreen(),
    ThirdScreen(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        onTap: OnTappedBar,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("accueil")),
          BottomNavigationBarItem(icon: Icon(Icons.search), title: Text("recherche")),
          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), title: Text("Mess Pass")),
          BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("Mon Profil")),
        ],
      ),
    );
  }
}

请！谁能告诉我bottomNavigationBar如何出现在所有页面上。

当我在任何页面上单击 Scaffold 中的 Flat 按钮时，底部应用栏会隐藏，但是当我使用底部应用栏项目在其他页面上导航时，底部应用栏不会消失。那么我该如何解决这个问题。我希望底部应用栏出现在所有页面上，即使我使用脚手架中的按钮导航或底部应用栏项目？？？

Answer 1

你可以使用这个包persistent_bottom_nav_bar来实现这种功能

Answer 2

默认情况下，底部导航栏在 MaterialApp 中不持久。 您可以使用 CupertinoTabScaffold 来实现这一点，但不能使用 Material 概念。

通过为您的选项卡和底部导航实现自定义导航器，在 Material 和 Scaffold 中有相同的解决方法。但是这里我们需要处理很多 Push/Pop 导航器的情况。

目前，我将这种自定义导航器方法用于我的持久底部导航用例，一旦完成我的工作就会通知您。

同时一些帮助我继续的资源

https://codewithandrea.com/articles/multiple-navigators-bottom-navigation-bar/ https://medium.com/@theboringdeveloper/common-bottom-navigation-bar-flutter-e3693305d2d

Answer 3

我相信你在 FlatButton's onPressed 方法中调用了“Navigator.push()”。

这里发生的情况是，当您调用Navigator.push() 时，带有BottomNavigationBar 的屏幕会隐藏在新屏幕下，或者在ScreenStack 中下降（编造术语）。

您应该改为使用 PageController 导航到 Flatbutton 的 onPressed 内的不同页面。

pageController.animateToPage(index);

看到这个答案 https://stackoverflow.com/a/56540176/10285344

为了自定义您当前的实现以满足您的要求，我建议您进行以下更改。

您应该使用 PageView 来实现这一点，因为它为您提供了一个 controller 来在页面之间切换。

适合您的情况 如果您出于某种原因不想使用PageView，我建议您在我最近的一个项目中使用以下解决方法，我使用Provider 在Screens 之间切换，而不使用Navigator 或PageView。

您需要Provider 包来进行此自定义。 https://pub.dev/packages/provider/install

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ChangeNotifierProvider<ValueNotifier<int>>.value(
        value: ValueNotifier<int>(0), //PageIndex is set to 0 to open first when when the app launches
        child:  MyNavigationBar(),
      ),

    );
  }
}


class MyNavigationBar extends StatefulWidget {
  @override
  _MyNavigationBarState createState() => _MyNavigationBarState();
}

class _MyNavigationBarState extends State<MyNavigationBar> {


// all pages 
  final List<Widget> _children = [
    ListScreen(),
    HomaPage(),
    FourthScreen(),
    ThirdScreen(),
  ];

  void OnTappedBar(int index){
    Provider.of<ValueNotifier<int>>(context, listen: false).value = index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[Provider.of<ValueNotifier<int>>(context).value],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        onTap: OnTappedBar,
        currentIndex: Provider.of<ValueNotifier<int>>(context).value,,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("accueil")),
          BottomNavigationBarItem(icon: Icon(Icons.search), title: Text("recherche")),
          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), title: Text("Mess Pass")),
          BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("Mon Profil")),
        ],
      ),
    );
  }
}

如何从一个页面内部切换到不同的页面？

class ListScreen extends StatefulWidget {
  @override
  _ListScreenState createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: FlatButton(
        child: Text('Switch To HomePage'),
        onPressed: (){

          Provider.of<ValueNotifier<int>>(context, listen: false).value = 1;
        },
      ),),
    );
  }
}