我正在制作一个包含4个不同页面的项目。我使用“ BottomNavigationBar”小部件导航到每个页面。当按下“ BottomNavigationBar”中的图标时，我在支架体内显示了不同的页面。我不使用任何路由，因此当用户在Android上按下时，该应用程序将关闭。我不想发生的事情。
我找到的所有指南在导航时都会重新加载整个“ Scaffold”，但是我只想更新“ Scaffold”小部件的“ body”属性。当Navigation.pop()发生a 时，我再次只希望更改“脚手架”主体。
我找到了关于同一问题的帖子，但答案对我不起作用。
我可以尝试的另一种解决方法是创建自定义历史记录列表，然后在页面更改时更新该列表。按下后退按钮时，捕获OnWillPop事件以更新页面。我没有尝试过，因为我觉得必须有更好的方法。
显示页面的脚手架小部件。
Widget createScaffold() {
return Scaffold(
backgroundColor: Colors.white,
appBar: EmptyAppBar(),
body: _displayedPage,
bottomNavigationBar: createBottomNavigationbar(),
);
}
BottomNavigationBar小部件。
Widget createBottomNavigationbar() {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _selectedIndex,
onTap: _onItemTapped,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home,
color: _selectedIndex == 0 ? selectedColor : unselectedColor),
title: new Text('Home',
style: new TextStyle(
color:
_selectedIndex == 0 ? selectedColor : unselectedColor)),
),
BottomNavigationBarItem(
icon: new Icon(Icons.show_chart,
color: _selectedIndex == 1 ? selectedColor : unselectedColor),
title: new Text('Month',
style: new TextStyle(
color:
_selectedIndex == 1 ? selectedColor : unselectedColor)),
),
BottomNavigationBarItem(
icon: Icon(Icons.history,
color: _selectedIndex == 2 ? selectedColor : unselectedColor),
title: Text('History',
style: new TextStyle(
color: _selectedIndex == 2
? selectedColor
: unselectedColor))),
BottomNavigationBarItem(
icon: Icon(Icons.settings,
color: _selectedIndex == 3 ? selectedColor : unselectedColor),
title: Text('Settings',
style: new TextStyle(
color: _selectedIndex == 3
? selectedColor
: unselectedColor)))
],
);
}
更新显示页面状态的方法。
void _onItemTapped(int index) {
_changeDisplayedScreen(index);
setState(() {
_selectedIndex = index;
});
}
void _changeDisplayedScreen(int index) {
switch (index) {
case 0:
setState(() {
_displayedPage = new LatestReadingPage();
});
break;
case 1:
setState(() {
_displayedPage = new HomeScreen();
//Placeholder
});
break;
case 2:
setState(() {
_displayedPage = new HomeScreen();
//Placeholder
});
break;
case 3:
setState(() {
_displayedPage = new HomeScreen();
//Placeholder
});
break;
default:
setState(() {
_displayedPage = new LatestReadingPage();
});
break;
}
}
}
我想要的是能够使用Flutter Navigation基础结构，但仅在更改页面时更新Scaffold小部件的body属性。而不是整个屏幕。
很像Youtube应用或Google新闻应用。
京公网安备 11010802040832号 | 京ICP备19059560号-6 