如何使底部导航栏在我的应用程序的每个页面上都可见？

Question

任何人，请告诉我如何在 flutter 中让底部导航栏在我的应用程序的每个页面上都可见？我知道有一个名为 Custom Navigator (https://pub.dev/packages/custom_navigator) 的选项，但是如何将它用于 2 个以上的子页面？请帮助我，我被困在一个大项目上。提前谢谢你:)

Answer 1

您只需要在同一页面上更改小部件，无需导航，查看此代码！

import 'package:flutter/material.dart';
import './pages/home.dart'; //imported widget 1
import './pages/listed_homes.dart'; //imported widget  2
import './widgets/form_card.dart'; //imported widget   3

    class BottomNav extends StatefulWidget {
        @override
        State<StatefulWidget> createState() {
        return BottomNavState();
        }
    }

    class BottomNavState extends State<BottomNav> {
        int _currentIndex = 0; //initialize index that alters widgets when increased or decreased`

        Widget build(BuildContext context) {
        return Scaffold(
          bottomNavigationBar: BottomNavigationBar(
              currentIndex: _currentIndex,
              onTap: (value) {
                _currentIndex = value;
                setState(() {});
              },
              items: [
                BottomNavigationBarItem(
                    //<--- item 1 text and icon declared
                    icon: Icon(Icons.book),
                    title: Text('Find a home')),
                BottomNavigationBarItem(
                    //<--- item 2 text and icon declared
                    icon: Icon(Icons.add_a_photo),
                    title: Text('Enlist a home')),
                BottomNavigationBarItem(
                    //<--- item 3 text and icon declared
                    icon: Icon(Icons.message),
                    title: Text('Messages')),
              ]),
           body: Stack(children: [
            [
              Home(_cent), //widget one
              FormCard(widget.model), //widget two
              Messages()  //widget three
            ][_currentIndex], //Alter widgets with changing index
            Positioned(
              top: 30,
              left: 15,
              child: IconButton(
                icon: Icon(Icons.menu),
                onPressed: () {},
                padding: EdgeInsets.all(0.0),
                iconSize: 40.0,
              ),
            )
          ]),
        );
        }
    }

Answer 2

选中此方法以在每个页面上保留一个小部件：

MaterialApp(
 title: 'Flutter Demo',
 initialRoute:"/home",
 routes: [
   ...
 ],
 builder: (context, child) {
 return Stack(
  children: [
    child!,
    Overlay(
      initialEntries: [
        OverlayEntry(
          builder: (context) {
            return YourCustomWidget(); *//This widget now appears on all  pages*
          },
        ),
      ],
    ),
  ],
);
},

如何使底部导航栏在我的应用程序的每个页面上都可见？

How to make Bottom Navigation Bar visible on every page of my app in flutter?

flutter

dart

android-bottomnav