对于状态管理方面的动静和超级菜鸟我还是很陌生。
我正在尝试制作一个在BottomBar中具有5个选项卡的应用程序,每个选项卡中都有多个导航页面。当前,如果我尝试从主页之一导航到其子页面,则AppBar和Bottombar消失。以下是我当前主页的代码。该代码表示我想在应用程序的每个页面中显示的内容。
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int currentTab = 0; // to keep track of active tab index
final List<Widget> screens = [
Feed(key: PageStorageKey('Feed'),),
Insights(key: PageStorageKey('Insights'),),
Data(key: PageStorageKey('Data'),),
Profile(key: PageStorageKey('Profile'),),
ZPart(key: PageStorageKey('Zpart'),),
];
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = Feed();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
iconTheme: IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
title: Text(
'Zecide',
style: TextStyle(
fontFamily: "Raleway-Black.ttf",
fontSize: 23.0,
color: Color(0xFF3F5EFB),
letterSpacing: 2.0,
fontWeight: FontWeight.w800,
),
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(2.0),
child: IconButton(
icon: Icon(Icons.search),
onPressed: (){
},),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: IconButton(icon: Icon(Icons.notifications, color: Colors.blueAccent),
onPressed: (){
},),
)
],
),
////// Drawer ///////
drawer: Drawer(
elevation: 5,
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('Siddharth Singh', style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700, color: Colors.white),),
decoration: BoxDecoration(color: Colors.blueAccent,),
),
ListTile(title: Text('Settings'),),
ListTile(title: Text('Account Details'),),
ListTile(title: Text('Logout'),),
ListTile(title: Text('Version'), subtitle: Text('Version 1.0 Beta'),),
],
),
),
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
///// Below is bottombar ( Kinda lengthy, you can skip if you want from here) //
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.white,
child: Container(
height: 50.0,
width: 50.0,
child: Image.asset("assets/logo.png"),
),
onPressed: () {
setState(() {
currentScreen = ZPart();
currentTab = 69;
});
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Feed(); // if user taps on this dashboard tab will be active
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.newspaper,
color: currentTab == 0 ? Colors.blueAccent : Colors.grey,
),
Text(
'Feed',
style: TextStyle(
color: currentTab == 0 ? Colors.black87 : Colors.grey,
fontFamily: "Quicksand-Light",
fontWeight: FontWeight.w400,
),
),
],
),
),
SizedBox(width: 10.0,),
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Insights(); // if user taps on this dashboard tab will be active
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.chartBar,
color: currentTab == 1 ? Colors.blueAccent : Colors.grey,
),
Text(
'Insights',
style: TextStyle(
color: currentTab == 1 ? Colors.black87 : Colors.grey,
fontFamily: "Quicksand-Light",
fontWeight: FontWeight.w400,
),
),
],
),
)
],
),
// Right Tab bar icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Data(); // if user taps on this dashboard tab will be active
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.pie_chart_outlined,
color: currentTab == 2 ? Colors.blueAccent : Colors.grey,
),
Text(
'Data',
style: TextStyle(
color: currentTab == 2 ? Colors.black87 : Colors.grey,
fontFamily: "Quicksand-Light",
fontWeight: FontWeight.w400,
),
),
],
),
),
SizedBox(width: 10.0,),
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Profile(); // if user taps on this dashboard tab will be active
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.user,
color: currentTab == 3 ? Colors.blueAccent : Colors.grey,
),
Text(
'Profile',
style: TextStyle(
color: currentTab == 3 ? Colors.black87 : Colors.grey,
fontFamily: "Quicksand-Light",
fontWeight: FontWeight.w400,
),
),
],
),
)
],
)
],
),
),
),
);
}
}
尽管我在代码中使用了PageStorage
,但是我对此并不满意。在保持状态的同时导航到子页面似乎令人困惑。根据我目前的理解,我认为提供者可以解决所有这些问题。我已经看过提供程序的教程,但是仍然缺乏解决此特定问题的清晰性。
请就我如何改善和解决此问题发表评论,谢谢您的宝贵时间!
我要附加应用Home screen的图片