带底部导航标签的Flutter抽屉

Question

我还是flutter的初学者，我想创建一个带有侧边抽屉和底部导航选项卡栏的flutter移动应用程序。我已经创建了一个侧面抽屉和底部导航的应用程序，但我的问题是我想从抽屉和底部的导航选项卡打开主页

现在抽屉正在打开主页，但没有显示底部导航器。

这是我的代码

main.dart

import 'package:discover_me/screens/home.dart';
import 'package:discover_me/screens/search.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.white
),
home: TabsPage(),
debugShowCheckedModeBanner: false,
routes: {
// '/': (context) => Home(),
'/home': (context) => Home(),
'/search': (context) => SearchPage(),
},
);
}
}

tabspage.dart

import 'package:discover_me/shared/bottom_tabs.dart';
import 'package:flutter/material.dart';
class TabsPage extends StatefulWidget {
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: [
for (final tabItem in TabNavigationItem.items) tabItem.page,
],
),
// drawer: SideMenu(),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

bottom_tabs.dart

import 'package:discover_me/screens/home.dart';
import 'package:discover_me/screens/search.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({this.page, this.title, this.icon});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: SearchPage(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
];

}

home.dart

import 'package:discover_me/jsn_objects/visit_places.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:discover_me/widgets/side_menu.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool expanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(

drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(
context, '/search'
);
}),
],
),
body: Column(

children: [
Container(color: Colors.green, height: 100),
AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: expanded ? 120 : 0,
child: Container(height: 120, color: Colors.red),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
heroTag: null,
child:
Icon(expanded ? Icons.arrow_upward : Icons.arrow_downward),
onPressed: () => setState(() {
expanded = !expanded;
}),
),
],
),
],

),

);
}
}

我想用抽屉里的底部导航来调用主页。你能帮我做这个吗？

Answer 1

它没有显示BottomNavigationBar，因为您没有在主页中调用它。你可以创建一个通用的BottomNavigationBar，并在任何你想看到它的地方调用它，如果你愿意，你可以通过将其设置为提供者来控制所选的选项卡。

所以基本上你的主页应该是这样的：

import 'package:discover_me/jsn_objects/visit_places.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:discover_me/widgets/side_menu.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool expanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(context, '/search');
}),
],
),
body: Column(
children: [
Container(color: Colors.green, height: 100),
AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: expanded ? 120 : 0,
child: Container(height: 120, color: Colors.red),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
heroTag: null,
child:
Icon(expanded ? Icons.arrow_upward : Icons.arrow_downward),
onPressed: () => setState(() {
expanded = !expanded;
}),
),
],
),
],
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

但是为您的每个页面创建新的BottomNavigationBar是不好的。我建议你创建一个通用的

Answer 2

最后，我设法解决了我的问题。

我在TabsPage中添加了一个构造函数参数，并在从侧抽屉调用页面时传递该值。

这是的解决方案

main.dart

import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/tabspage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white, primaryColor: Colors.white),
home: TabsPage(selectedIndex: 0),
debugShowCheckedModeBanner: false,
);
}
}

sidemenu.dart文件

import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/tabspage.dart';
class SideMenu extends StatefulWidget {
@override
_SideMenuState createState() => _SideMenuState();
}
class _SideMenuState extends State<SideMenu> {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text(
'Discover Sri Lanka',
style: TextStyle(color: Colors.white, fontSize: 25),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)),
color: Colors.white,
image: DecorationImage(
fit: BoxFit.fill, image: AssetImage('assets/sideimg.jpg'))),
),
ListTile(

leading: Icon(Icons.home),
title: Text('Home'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 0)),
)
},
),
ListTile(
leading: Icon(Icons.search),
title: Text('Search'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 1)),
),
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Profile'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 2)),
),
},
),

],
),
);
}
}

tabspage.dart

import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/bottom_tabs.dart';
class TabsPage extends StatefulWidget {
int selectedIndex = 0;
TabsPage({this.selectedIndex});
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _selectedIndex = 0;

void _onItemTapped(int index) {
setState(() {
widget.selectedIndex = index;
_selectedIndex = widget.selectedIndex;
print(_selectedIndex);
});
}
@override
void initState() {
_onItemTapped(widget.selectedIndex);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: IndexedStack(
index: widget.selectedIndex,
children: [
for (final tabItem in TabNavigationItem.items) tabItem.page,
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon: Icon(Icons.verified_user),
title: Text('Profile'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

bottom_tabs.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:tabsdrawer/screens/home.dart';
import 'package:tabsdrawer/screens/profile.dart';
import 'package:tabsdrawer/screens/search.dart';
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({this.page, this.title, this.icon});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: Search(),
icon: Icon(Icons.search),
title: Text("Search"),
),
TabNavigationItem(
page: Profile(),
icon: Icon(Icons.home),
title: Text("Home"),
),
];
}

home.dart

import 'package:flutter/material.dart';
import 'package:tabsdrawer/sidemenu/side_menu.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(context, '/search');
}),
],
),
body: Center(
child: Text('Home Page'),
),
);
}
}

我写了一篇文章，在这里提到了整个解决方案，https://medium.com/@prabhashibuddhima/flutter-how-to-make-flutter-side-drawer-side-manu-work-with-bottom-navigation-bottom-tab-ce66a95e25fe