保持底部导航栏在每个屏幕上颤动

Question

我有这个底部导航栏，带有中心停靠的浮动图标，底部栏存在，我可以浏览底部栏中的选项卡元素，但我需要显示固定到每个屏幕的底部栏，无论我打开什么屏幕，我都需要显示底栏导航

1.如何查看子页面中的底部栏示例，如果我转到主屏幕并且要单击主页中的某个项目并重定向下一页，则底部导航栏应显示在重定向的页面中

底栏导航

class BottomViewScreenState extends State<BottomViewScreen> {
  TabController tabController;

 static int _selectedTab = 0;
  final List<Widget> _children = [
    new HomeScreen(),
    new OfferScreen(),
    new HelpScreen(),
    new ProfileScreen(),
    new CartViewScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color(0xffFF5555),
      ),
      home: Scaffold(
        body: _children[_selectedTab], // new
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // new CartViewScreen();
            //onTabTapped(4);
            // CartViewScreen();
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => CartViewScreen(),
              ),
            );
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(Icons.add_shopping_cart),
              Text(
                "CART",
                style: TextStyle(fontSize: 8.0),
              ),
            ],
          ),
          backgroundColor: Colors.indigo[900],
          foregroundColor: Colors.white,
          elevation: 2.0,
        ),
        bottomNavigationBar: BottomAppBar(
          clipBehavior: Clip.antiAlias,
          notchMargin: 10.0,
          shape: CircularNotchedRectangle(),
          child: SizedBox(
            height: 80,
            child: Theme(
              data: Theme.of(context).copyWith(
                  // sets the background color of the `BottomNavigationBar`
                  canvasColor: Colors.white,

                  // sets the active color of the `BottomNavigationBar` if `Brightness` is light
                  primaryColor: Colors.amberAccent,
                  textTheme: Theme.of(context)
                      .textTheme
                      .copyWith(caption: new TextStyle(color: Colors.grey))),
              child: BottomNavigationBar(
                type: BottomNavigationBarType.fixed,
                onTap: onTabTapped,
                currentIndex: _selectedTab,
                fixedColor: Colors.amberAccent,
                items: [
                  BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    title: Text(
                      'HOME',
                      style: TextStyle(fontSize: 10.0),
                    ),
                    activeIcon: Column(
                      children: <Widget>[
                        Icon(Icons.local_offer),
                      ],
                    ),
                  ),
                  BottomNavigationBarItem(
                      icon: SvgPicture.asset(
                        "assets/images/ic_bottom_offer.svg",
                        height: 25,
                        color: Colors.grey,
                      ),
                      title: Text('OFFERS', style: TextStyle(fontSize: 10.0))),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.info_outline),
                      title: Text('HELP', style: TextStyle(fontSize: 10.0))),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.people),
                      title: Text('PROFILE', style: TextStyle(fontSize: 10.0))),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _selectedTab = index;
    });
  }
}

主要的

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "App",
      home: new SplashScreen(),
      routes: {
        "/homescreen": (_) => new BottomViewScreen(),
        "/login":(_) => new LoginScreen(),
       
      },
    );
  }
}

Answer 1

我已经通过使用这个插件Ppressive_bottom_nav_bar解决了这个问题。现在我可以在每个屏幕上使用bottomnavbar

PersistentTabController _controller =PersistentTabController(initialIndex: 0);

//Screens for each nav items.
  List<Widget> _NavScreens() {
    return [
     HomeScreen(),
     OfferScreen(),
     HelpScreen(),
     ProfileScreen(),
     CartViewScreen(),
      
    ];
  }


  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
       icon: Icon(Icons.home),
        title: ("Home"),
        activeColorPrimary: CupertinoColors.activeBlue,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.favorite),
        title: ("OFFERS"),
        activeColorPrimary: CupertinoColors.activeGreen,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.person_pin),
        title: ("Help"),
        activeColorPrimary: CupertinoColors.systemRed,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.local_activity),
        title: ("ProfileScreen"),
        activeColorPrimary: CupertinoColors.systemIndigo,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
 PersistentBottomNavBarItem(
        icon: Icon(Icons.shop_cart),
        title: ("Cart"),
        activeColorPrimary: CupertinoColors.systemIndigo,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),

    ];
  }
@override
Widget build(BuildContext context) {
    return Center(
      child: PersistentTabView(
        controller: _controller,
        screens: _NavScreens(),
        items: _navBarsItems(),
        confineInSafeArea: true,
        backgroundColor: Colors.white,
        handleAndroidBackButtonPress: true,
        resizeToAvoidBottomInset: true,
        hideNavigationBarWhenKeyboardShows: true,
        decoration: NavBarDecoration(
          borderRadius: BorderRadius.circular(10.0),
        ),
        popAllScreensOnTapOfSelectedTab: true,
        navBarStyle: NavBarStyle.style9,
      ),
    );
}

如果您不希望导航栏出现在某些屏幕上，您可以使用以下导航器，有关更多信息，请查看permanent_bottom_nav_bar 文档

 pushNewScreen(
        context,
        screen: MainScreen(),
        withNavBar: false, // OPTIONAL VALUE. True by default.
        pageTransitionAnimation: PageTransitionAnimation.cupertino,
    );

Answer 2

有两种方法可以处理这种情况 -

• 索引栈
• 页面预览

上面已经讨论了页面视图方法，我将解释 IndexedStack 方法 -

IndexedStack 是Fl​​utter 中Stack widget 的扩展，与 Stack Widget 根据列表中的索引将所有子级显示在彼此之上的 Stack Widget 不同，Indexed widget 仅显示子级列表中的单个子级。

IndexedStack 有两个重要的属性 -

• index ：这确定要从子项列表中显示的子项的索引。
• Children ：所有可用子项的列表。

以下代码显示了解决上述问题的实现 -

创建一个有状态的小部件来保存所有可能视图的列表、要显示的视图的当前索引以及底部导航栏。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  
  int _currentIndex = 0;
  const List<Widget> _pages = <Widget>[
    HomeView(),
    OffersView(),
    HelpView(),
    ProfileView(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: false,
        child: IndexedStack(
          index: _currentIndex,
          children: _pages,
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
                  BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    title: Text(
                      'HOME',
                      style: TextStyle(fontSize: 10.0),
                    ),
                    activeIcon: Column(
                      children: <Widget>[
                        Icon(Icons.local_offer),
                      ],
                    ),
                  ),
                  BottomNavigationBarItem(
                      icon: SvgPicture.asset(
                        "assets/images/ic_bottom_offer.svg",
                        height: 25,
                        color: Colors.grey,
                      ),
                      title: Text('OFFERS', style: TextStyle(fontSize: 10.0),
                    ),
                  ),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.info_outline),
                      title: Text('HELP', style: TextStyle(fontSize: 10.0),
                    ),
                  ),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.people),
                      title: Text('PROFILE', style: TextStyle(fontSize: 10.0),
                    ),
                  ),
                ],
      ),
    );
  }
}

最后运行应用程序 -

void main() {
  runApp(MaterialApp(home: HomePage(), debugShowCheckedModeBanner: false));
}

我们完成了！