我正在制作一个有 4 个不同页面的项目。我使用"底部导航栏"小部件导航到每个页面。当按下"底部导航栏"中的图标时，我会在脚手架正文中显示不同的页面。我不使用任何路由，因此当用户在 Android 上按下时，应用程序会关闭。我不希望发生的事情。
我找到的所有指南在导航时都会重新加载整个"脚手架"，但我只想更新"脚手架"小部件的"body"属性。当发生Navigation.pop()时，我再次只希望"脚手架"主体发生变化。
我找到了一篇关于同一问题的帖子，但答案对我不起作用。
我可以尝试的另一种解决方法是创建自定义历史记录列表，然后在页面更改时更新该列表。捕获 OnWillPop 事件以在按下后退按钮时更新页面。我没有尝试过这个，因为我觉得必须有更好的方法。
显示页面的基架构件。
Widget createScaffold() {
return Scaffold(
backgroundColor: Colors.white,
appBar: EmptyAppBar(),
body: _displayedPage,
bottomNavigationBar: createBottomNavigationbar(),
);
}
底部导航栏小部件。
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 导航基础设施，但只在更改页面时更新 Scaffold 小部件的 body 属性。而不是整个屏幕。
很像Youtube应用程序或Google新闻应用程序。
我已经为您链接的帖子添加了答案：https://stackoverflow.com/a/59133502/6064621
下面的答案与上面的答案相似，但我在这里也添加了未知的路线：
您想要的可以通过使用自定义导航器来实现。
Flutter 团队为此制作了一段视频，他们关注的文章在这里： https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386
基本上，您需要将脚手架的主体包裹在自定义Navigator中：
class _MainScreenState extends State<MainScreen> {
final _navigatorKey = GlobalKey<NavigatorState>();
// ...
@override
Widget build(BuildContext context) {
return Scaffold(
body: Navigator(
key: _navigatorKey,
initialRoute: '/',
onGenerateRoute: (RouteSettings settings) {
WidgetBuilder builder;
// Manage your route names here
switch (settings.name) {
case '/':
builder = (BuildContext context) => HomePage();
break;
case '/page1':
builder = (BuildContext context) => Page1();
break;
case '/page2':
builder = (BuildContext context) => Page2();
break;
default:
throw Exception('Invalid route: ${settings.name}');
}
// You can also return a PageRouteBuilder and
// define custom transitions between pages
return MaterialPageRoute(
builder: builder,
settings: settings,
);
},
),
bottomNavigationBar: _yourBottomNavigationBar,
);
}
}
在底部导航栏中，要导航到新自定义Navigator中的新屏幕，您只需调用以下命令：
_navigatorKey.currentState.pushNamed('/yourRouteName');
如果不使用命名路由，则应执行以下操作，以便自定义Navigator和导航到新屏幕：
// Replace the above onGenerateRoute function with this one
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute(
builder: (BuildContext context) => YourHomePage(),
settings: settings,
);
},
_navigatorKey.currentState.push(MaterialPageRoute(
builder: (BuildContext context) => YourNextPage(),
));
要让Navigator.pop带您进入上一个视图，您需要用WillPopScope包装自定义Navigator：
@override
Widget build(BuildContext context) {
return Scaffold(
body: WillPopScope(
onWillPop: () async {
if (_navigatorKey.currentState.canPop()) {
_navigatorKey.currentState.pop();
return false;
}
return true;
},
child: Navigator(
// ...
),
),
bottomNavigationBar: _yourBottomNavigationBar,
);
}
应该就是这样！无需手动处理太多弹出或管理自定义历史记录列表。
将您的身体包裹在 IndexedStack 小部件中。喜欢这个：
body: IndexedStack(
index: selectedIndex,
children: _children, //define a widget children list
),
这是一个链接 https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386
你试过这个吗？
return Scaffold(
backgroundColor: Colors.white,
appBar: EmptyAppBar(),
body: _displayedPage[_selectedIndex],
bottomNavigationBar: _createBottomNavigationbar,
);
然后，您可以制作所需的所有屏幕的小部件列表：
List<Widget> _displayedPage = [LatestReadingPage(), HomeScreen(), ExampleScreen()];