1 
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 按钮时，底部的应用程序栏会被隐藏，但是当我使用底部的应用程序栏项目在其他页面上导航时，底部的应用程序栏不会消失。那么我该如何解决这个问题。我希望底部应用栏出现在所有页面上，即使我使用脚手架中的按钮导航或底部应用栏项目？？？

4

3 回答 3

2

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

于 2021-01-22T05:41:59.717 回答
1

默认情况下，底部导航栏在 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

于 2021-03-21T17:43:39.130 回答
0

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

这里发生的情况是，当您在新屏幕下Navigator.push()使用 hides 调用屏幕时，或者在（虚构的术语）BottomNavigationBar中下降。ScreenStack

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

pageController.animateToPage(index);

请参阅此答案 https://stackoverflow.com/a/56540176/10285344

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

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

对于您的情况 ，如果您出于某种原因不想使用PageView，我建议您在我最近的一个项目中使用以下解决方法，我使用它来在不使用orProvider之间切换。ScreensNavigatorPageView

你需要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;
        },
      ),),
    );
  }
}
于 2021-01-22T05:36:55.707 回答