当我有Nested时,我遇到了这个问题Navigator。所以像
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: "/",
routes: {
'/': (context) => SomeOneView(),
'/two': (context) => SomeTwoView(),
'/three': (context) => SomeThreeView(),
},
);
}
}
class SomeOneView extends StatefulWidget {
@override
_SomeOneViewState createState() => _SomeOneViewState();
}
class _SomeOneViewState extends State<SomeOneView> {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.indigo,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MaterialButton(
color: …Run Code Online (Sandbox Code Playgroud) 我在颤振文档中给出的页面路由代码下面
// Within the `FirstRoute` widget
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
}
Run Code Online (Sandbox Code Playgroud)
但是它在推送和弹出路由时提供了一些动画。
对于Android,页面的入口过渡将页面向上滑动并淡入。出口过渡相同,但相反。
过渡适应平台,在iOS上,页面从右侧滑入反向退出。当另一个页面进入以覆盖它时,页面也会以视差向左移动。(这些方向在具有从右到左阅读方向的环境中翻转。)
有没有办法在没有任何动画的情况下路由到下一页?
编辑: 请检查整个代码:
class MyApp extends StatelessWidget {
final routes = <String, WidgetBuilder>{
SecondRoute.tag: (context) => SecondRoute(),
};
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter Routes",
home: new FirstRoute(),
routes: routes,
onGenerateRoute: (routeSettings) {
if (routeSettings.name == SecondRoute.tag)
return PageRouteBuilder(pageBuilder: (_, a1, a2) => SecondRoute());
return null;
},
);
}
}
class FirstRoute extends StatelessWidget {
@override
Widget …Run Code Online (Sandbox Code Playgroud) 在颤动中做底部导航栏的最佳方法是什么?
根据获取到导航的颤振底部扑团队使用IndexedStack与Offstage显示当用户更改标签的部件,但是我看到有做这个的另一种方式TabBarView,以简单的幻灯片动画控件之间的变化,也保持每个插件的滚动状态
那么IndexedStack+Offstage和之间有什么区别TabBarView?我应该使用类似的东西flutter_bloc还是只使用setState()?
在我的应用程序中,我想要一个自定义导航(仅更改屏幕的一部分并保留我在其中执行的操作的历史记录)。为此,我使用了一个导航器,它对于简单的导航工作正常。但是,我想处理 Android 的后退按钮。Flutter 中显然存在问题,这迫使我处理导航器的父小部件中的后退按钮:https : //github.com/flutter/flutter/issues/14083
因此,我需要在子代中检索 Navigator 的实例并对其调用 pop()。我正在尝试为此使用 GlobalKey。
我现在正试图让它工作一段时间,并制作了一个示例项目来测试它。这是我的代码:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(title: 'Navigation Basics', home: MainWidget()));
}
class MainWidget extends StatelessWidget {
final GlobalKey<NavigatorState> navigatorKey = GlobalKey();
@override
Widget build(BuildContext context) {
return SafeArea(
child: WillPopScope(
onWillPop: () => navigatorKey.currentState.maybePop(),
child: Scaffold(
body: Padding(
child: Column(
children: <Widget>[
Text("Toto"),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: RaisedButton(
child: Text('First'),
onPressed: () {
navigatorKey.currentState.pushNamed('/first');
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => SecondRoute()),
// …Run Code Online (Sandbox Code Playgroud) 不知道实现 Flutter 2.0 路由后如何清除堆栈并路由到新页面。
以下内容不起作用:
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => SignInPage()), (route) => false);
Run Code Online (Sandbox Code Playgroud)
[VERBOSE-2:ui_dart_state.cc(186)] Unhandled Exception: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 3075 pos 7: '!hasPage || isWaitingForExitingDecision': A page-based route cannot be completed using imperative api, provide a new list without the corresponding Page to Navigator.pages instead.
我正在开发 Flutter Web并使用go_router进行导航。
期望: 从初始路线开始,当用户尝试使用浏览器后退按钮导航回来或重新加载页面时,应显示一个警告框并询问“您确定要退出吗?” 用户交互页面上的消息类型允许退出或停留在同一页面上。
尝试过的方法:
1.WillPopScope:
我在 HomeRoute Widget 上添加了 WillPopScope 小部件来检测 popCallBack。但不知何故,按下后退按钮时不会触发它,因为我可能使用了 go_router 进行导航。
通过执行下面的语句,我无法在控制台 onBack 事件上打印日志。
return WillPopScope(
onWillPop: () async {
print("on Will Pop is Called");
return false;
},
child: PaintScaffold(...)
);
Run Code Online (Sandbox Code Playgroud)
MaterialApp.router 的 BackButtonDispatcher 仅适用于 android,不适用于 web。所以这是行不通的。参考之。
2. onBeforeUnload 监听器
我尝试在index.html 文件中添加脚本来检测onBeforeUnload 事件。但它的行为却出人意料。它在 chrome 浏览器中工作正常,但在 safari 中,按下后退按钮时不会显示警报框。但要努力重新加载页面。
在 iOS safari 浏览器上,当页面卸载时,在任何情况下都不会触发 onBeforeUnload。
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return …Run Code Online (Sandbox Code Playgroud) flutter gorouter flutter-navigation flutter-web flutter-go-router
在我的 Flutter 应用程序中,我使用该go_router包来管理路由和Firebase Authentication用户身份验证。我有几个屏幕需要用户经过身份验证才能访问,例如帐户管理、交易和详细信息。
目前,我已经实现了重定向,go_router以确保未经身份验证的用户被正确重定向。但是,当用户已经位于这些屏幕之一并注销或会话过期时,我面临着挑战。
我正在考虑使用 BlocListener 来检测每个屏幕上身份验证状态的变化,但这似乎会导致代码重复。由于 Firebase 身份验证,我还有一个 Stream 通知身份验证状态的更改,并更新变量contex.isUserSignIn。
使用 go_router 和 Firebase 身份验证有效处理 Flutter 中的注销或会话过期事件的最佳实践是什么?
firebase-authentication flutter gorouter flutter-navigation flutter-go-router
我正在使用 Navigator 的声明式方法:
Navigator(
pages: [
MaterialPage(child: _screen),
],
onPopPage: (route, result) {
return route.didPop(result);
},
);
Run Code Online (Sandbox Code Playgroud)
如何在屏幕之间添加过渡?
我目前正在更新 Flutter Web 应用程序以支持通过 URL 共享页面。我目前有一个使用 的屏幕TabBar,并根据所选选项卡显示不同的视图。我希望能够做两件事:
§ion=tabName到 URL)第二部分非常简单,只需接受§ion=...参数并使用它来设置选项initialIndex卡控制器。然而更新 URL 似乎相当困难。
我尝试使用RouteInformationParser从参数列表生成新路由,但这会触发回调onGenerateRoute,并且似乎只是重新导航到具有initialIndex从新 URL 更新的页面。TabBarView我可以通过用导航到所选选项卡内容的嵌套导航器替换 来解决这个问题,但如果您想导航到比所选选项卡更深的位置,这似乎很快就会变得相当笨重。
我见过提到的一个更简单的选项是window.history.replaceState,它看起来简单得多,但感觉有点混乱。有没有我错过的方法可以做到这一点?
谢谢!
我正在使用go_router构建一个执行“虚拟”路由推送的应用程序(有点像 Twitter)。可以从一个页面开始/a,推送/b,然后/c,...然后再次推送/a。
当页面被推送两次时,会assert失败:assert(!keyReservation.contains(key));这确保了密钥在Navigator.
有没有办法能够使用 go_router 推送两次同一页面?
这是一个小代码片段:
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
final router = GoRouter(
initialLocation: '/a',
routes: [
GoRoute(
path: '/a',
builder: (_, __) => const MyWidget(path: '/a'),
),
GoRoute(
path: '/b',
builder: (_, __) => const MyWidget(path: '/b'),
),
],
);
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is …Run Code Online (Sandbox Code Playgroud)