如何在 Flutter 中的所有应用程序中分配 BottomNavigationBar？答案

【问题标题】：How to distribute BottomNavigationBar across all app in Flutter?如何在 Flutter 中的所有应用程序中分配 BottomNavigationBar？
【发布时间】：2020-04-12 16:57:11
【问题描述】：

我有一个应用程序，主页面上有一个底部导航栏，上面有两个项目。从主页，我可以控制它的行为，如在两个页面之间切换。但是，在所有页面上都有导航栏是很直观的。它是如何实现的？谢谢！

【问题讨论】：

标签： flutter

【解决方案1】：

这是一个完整的演示源代码。

我使用了https://pub.dev/packages/bottom_navy_bar 包。 确保将其导入您的项目。

import 'package:bottom_navy_bar/bottom_navy_bar.dart';
import 'package:flutter/material.dart';

class Demo extends StatefulWidget {

  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {

  int _currentIndex = 0; // to keep the index of currently selected tab

  Stack _bodyWidgets() {
    return Stack( children: <Widget>[ // stack to keep all the widgets on top of each
      Offstage( // offstage will keep the widget inactive when another tab is active
          offstage: _currentIndex != 0,
          child: TickerMode(enabled: _currentIndex == 0, child: _screen1Body())),
      Offstage(
        offstage: _currentIndex != 1,
        child: TickerMode(
          enabled: _currentIndex == 1,
          child: Text(("Screen 2"),
        ),
      )),
      Offstage(
        offstage: _currentIndex != 2,
        child: TickerMode(
          enabled: _currentIndex == 2,
          child: Text("Screen 3")),
        ),
    ]);
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          title: Text("DEMO"),
        ),
        body: _bodyWidgets(),
        bottomNavigationBar: BottomNavyBar(
            selectedIndex: _currentIndex,
            onItemSelected: (index) => _onTabTapped(index),
            showElevation: true,
            items: [
              BottomNavyBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Screen1')),
              BottomNavyBarItem(
                  icon: Icon(Icons.photo),
                  title: Text('Screen2'),
              ),
              BottomNavyBarItem(
                  icon: Icon(Icons.notifications),
                  title: Text('Screen3'),
                 ),

            ]));
  }

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

  _screen1Body() {
    return ListView.builder(
      itemCount: 100,
      itemBuilder: (context, i) {
        return Padding(padding: EdgeInsets.all(5), child: Text(i.toString()));
      },
    );
  }
}

截图：

【讨论】：