带有指定路线的颤振持久导航栏？
我一直在寻找一个很好的导航/路由器的例子，但我没有找到一个。
我想要达到的目标很简单：
- 持久的底部导航栏，突出当前顶级路由。
- 命名路线，这样我就可以从应用程序中的任何地方导航到任何路线。
- Navigator.pop应该总是带我去以前的视图
官方的颤振演示为BottomNavigationBar实现了1，但后退按钮和路由不工作。PageView和TabView也有同样的问题。还有许多其他教程可以通过实现MaterialApp路由来实现2和3，但它们似乎都没有持久的导航栏。
是否有任何导航系统的例子可以满足所有这些要求？
回答 3
Stack Overflow用户
发布于 2019-12-02 06:12:40
您的所有3个需求都可以通过使用自定义导航器来实现。
颤振小组在这方面做了一个视频，他们接下来的文章是：https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386
基本上，您需要将Scaffold的主体包装在自定义的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.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,
);
}应该是这样的！不需要手动处理pop或管理自定义历史记录列表。
Stack Overflow用户
发布于 2018-05-22 08:02:49
CupertinoTabBar的行为与您所描述的完全相同，但采用的是iOS风格。不过，它可以是MaterialApps。
Stack Overflow用户
发布于 2018-04-07 20:26:05
你所要求的将违反材料设计规范。
在Android上，后退按钮不会在底部导航栏视图之间导航。
导航抽屉会给你2和3，但不是1。这取决于什么对你来说更重要。
您可以尝试使用LocalHistoryRoute。这样可以达到您想要的效果：
class MainPage extends StatefulWidget {
@override
State createState() {
return new MainPageState();
}
}
class MainPageState extends State<MainPage> {
int _currentIndex = 0;
List<int> _history = [0];
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Bottom Nav Back'),
),
body: new Center(
child: new Text('Page $_currentIndex'),
),
bottomNavigationBar: new BottomNavigationBar(
currentIndex: _currentIndex,
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: new Icon(Icons.touch_app),
title: new Text('keypad'),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.assessment),
title: new Text('chart'),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.cloud),
title: new Text('weather'),
),
],
onTap: (int index) {
_history.add(index);
setState(() => _currentIndex = index);
Navigator.push(context, new BottomNavigationRoute()).then((x) {
_history.removeLast();
setState(() => _currentIndex = _history.last);
});
},
),
);
}
}
class BottomNavigationRoute extends LocalHistoryRoute<void> {}https://stackoverflow.com/questions/49681415
复制相似问题
腾讯云开发者
