底部导航栏在使用浮动url进行导航时消失

Question

当我点击导航栏时，它工作得很好；http://localhost:5000/#/profile"底部导航栏消失。我希望我的导航栏留在可以导航的页面上。我想我也应该以某种方式将导航栏添加到配置文件页面，但我找不到。

const String HomeRoute = '/';
const String ProfileRoute = '/profile';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider.value(value: DbProvider()),
ChangeNotifierProvider.value(
value: ThemeChanger(ThemeData.light()),
)
],
child: MaterialAppWithTheme(),
);
}
}
class MaterialAppWithTheme extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Provider.of<ThemeChanger>(context);
return MaterialApp(
initialRoute: HomeRoute,
routes: {
HomeRoute: (context) => HomePage(),
ProfileRoute: (context) => Profile(),
},
theme: theme.getTheme(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int menuItem = 0;
List<Widget> allPages;
Home home;
Profile profile;
Favorites favorites;
Offers offer;
FirebaseAuth firebaseAuth = FirebaseAuth.instance;
User currentUser;
@override
void initState() {
if (mounted) {
super.initState();
home = Home();
profile = Profile();
favorites = Favorites();
offer = Offers();
allPages = [home, offer, favorites, profile];
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: allPages[menuItem],
bottomNavigationBar: bottomNavMenu(),
);
}
Theme bottomNavMenu() {
return Theme(
data: ThemeData(
canvasColor: Colors.blue.shade900, primaryColor: Colors.orangeAccent),
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Main',
),
BottomNavigationBarItem(
icon: Icon(Icons.local_offer),
label: 'Offer',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite_outlined),
label: 'Favs',
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outlined),
label: 'Profile',
),
],
type: BottomNavigationBarType.shifting,
currentIndex: menuItem,
onTap: (index) {
setState(() {
menuItem = index;
});
},
),
);
}
}

class Profile extends StatefulWidget {
@override
_ProfileState createState() => _ProfileState();
}
class _ProfileState extends State<Profile > {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Profile')),
body: Center(
child: Text("Profile),
),
);
}
}

Answer 1

脚手架中包含底部导航栏。

因此，它只出现在主页小部件中。您的ProfilePage中应该有一个导航栏>如果您希望显示Scaffold小部件，也可以使用它。

您可能需要一个控制器来设置所选索引，以便所有"主"窗口小部件都可以访问当前索引(例如，使用提供程序(。

另一种解决方案是，通过路由传递当前索引。