更改底部导航当前索引，并从另一个屏幕类更新setState() [英] Change bottom navigation current index and update setState() from another screen class
问题描述
这是我的bottom_bar屏幕.我想通过单击另一个屏幕按钮来更改底部导航菜单.我该如何解决这个问题?是否有任何选项可以从另一个类导航bottom_navigation.我没有通过搜索得到任何准确的答案. [NB:我是完全陌生的人.如果有任何误解，请原谅我.]
Here is my bottom_bar screen. I want to change the bottom navigation menu from another screen button click. How can I resolve this problem?. is there any option that can navigate bottom_navigation from another class. I didn't get any accurate answers through search. [N.B: I am totally new in flutter. Please forgive me if there is any type of misconception ]
@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,
),
)
);
}
我想在此处从Tap上的其他屏幕上更改底部栏选择的索引.
I want to change bottom bar selected index from another screen from here on Tap.
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 商店.
You can use MobX for this,
You need to wrap your BottomNavigationBar with Observer and also declare your selectedIndex in MobX store.
一旦您在MobX存储中具有 selectedIndex ，您就可以使用 Provider 从应用程序中的任何位置访问它.
Once you have selectedIndex in your MobX store you can access it from anywere in app using Provider.
这篇关于更改底部导航当前索引，并从另一个屏幕类更新setState()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
