更改底部导航当前索引并从另一个屏幕类更新setState()



这是我的底部条形屏幕。我想从另一个屏幕按钮单击更改底部导航菜单。我该如何解决这个问题?。有没有任何选项可以从另一个类导航到bottom_navigation。通过搜索,我没有得到任何准确的答案。[N.B:我是个新手。如果有任何误解,请原谅我]

@override
Widget build(BuildContext context) {
final themeNotifier = Provider.of<ThemeNotifier>(context);
return  Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('JoyList'),
leading: IconButton(
icon:  Image( image: new AssetImage("images/Logo.png"),
width:  200,
height: 200,
color: null,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
tooltip: 'Show Snackbar',
onPressed: () {
// scaffoldKey.currentState.showSnackBar(snackBar);
},
),
actions: <Widget>[
IconButton(
icon: const ImageIcon( AssetImage("images/ic_notification_default.png")),
tooltip: 'Show Snackbar',
onPressed: () {
// scaffoldKey.currentState.showSnackBar(snackBar);
},
),
FutureBuilder(
future: _apiProvider.getUserImageUrl(),
builder: (context, AsyncSnapshot<String> projectSnap) {
if(projectSnap.hasData){
var url = projectSnap.data;
return   IconButton(
icon: Center(
child: new Container(
width: 30,
height: 30,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'$url'
)
)
),
),
),
onPressed: _modalBottomSheetMenu,
);
}else{
return Text("Nil");
}
}
)
],
),
body: CustomNavigator(
navigatorKey: navigatorKey,
home: Center(
child: _widgetOptions.elementAt(selectedIndex),
),
//Specify your page route [PageRoutes.materialPageRoute] or [PageRoutes.cupertinoPageRoute]
pageRoute: PageRoutes.cupertinoPageRoute,
),
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Theme.of(context).bottomAppBarColor,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
textTheme: Theme
.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.yellow))),
// sets the inactive color of the `BottomNavigationBar`
child: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: selectedIndex,
items: [
BottomNavigationBarItem(
icon: selectedIndex==0? new ImageIcon( AssetImage('images/ic_home_selected.png')):new ImageIcon( AssetImage('images/ic_home_default.png')),
title: Text(''),
),
BottomNavigationBarItem(
icon: selectedIndex==1? new ImageIcon( AssetImage('images/ic_list_selected.png')):new ImageIcon( AssetImage('images/ic_list_default.png')),
title: Text(''),
),
BottomNavigationBarItem(
icon: ImageIcon( AssetImage("images/ic_additems.png")),
title: Text(''),
),
BottomNavigationBarItem(
icon: ImageIcon( AssetImage("images/ic_search.png")),
title: Text(''),
),
BottomNavigationBarItem(
icon: selectedIndex==4? new ImageIcon( AssetImage('images/ic_notification_selected.png')):new ImageIcon( AssetImage('images/ic_notification_default.png')),
title: Text(''),
),
BottomNavigationBarItem(
//  icon: ImageIcon( AssetImage("images/ic_friends_selected.png")),
icon: ImageIcon( AssetImage("images/ic_friends_selected.png")),
title: Text(''),
),
],
showSelectedLabels: false,
unselectedItemColor: Theme.of(context).iconTheme.color,
showUnselectedLabels: false,
selectedItemColor: HexColor("1CD0A8"),
onTap: _onItemTapped,
),
)
);
}

我想在点击时从另一个屏幕更改底部栏选择的索引。

child:   GestureDetector(
child: FutureBuilder(
future: _getUser(),
builder: (context, AsyncSnapshot<dynamic> projectSnap) {
if(projectSnap.hasData){
user = projectSnap.data;
var url = getProfileImageBaseUrl()+ user.profilePicture;
return  Column(
children: <Widget>[
Container(
width: 170,
height: 170,
decoration: new BoxDecoration(
color: Theme.of(context).cardColor,
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'$url'
)
)
),
),
Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(user.fullName+"'s List",style: TextStyle(
color: Theme.of(context).textTheme.caption.color,
fontSize: 26
),),
),
)
],
);
}else{
return Text("Nil");
}
}
),
onTap: (){
print("On tap called");
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => FriendsPage()));
},
)

您可以使用MobX进行此操作,您需要用Observer包装BottomNavigationBar,并在MobX商店中声明selectedIndex

一旦你在MobX商店中有了selectedIndex,你就可以使用Provider从应用程序中的任何地方访问它。

最新更新