我的 Flutter Web App 仍然没有成功,执行基于 URL 的路由并保持 appbar 和 drawer 等内容持久化。
我试图实现的目标是,我只能修改我的应用程序的内容。因此,即如果用户输入 url $baseurl/#/它应该导航到第一页的内容。 $baseurl/#/two 到第二页的内容,依此类推...
我的主文件是这样的。正如您所看到的,它是通过 Fluro Router 完成的,我尝试简化一切以查看我的主要目标。
import 'package:flutter/material.dart';
import 'package:newnavigationtest/routes.dart';
void main() {
FluroRouter.setupRouter();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final navigatorKey = GlobalKey<NavigatorState>();
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MainLayout(),
);
}
}
class MainLayout extends StatelessWidget {
final navigatorKey = GlobalKey<NavigatorState>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
Column(
children: [
Expanded(
child: Container(
color: Colors.green,
width: 100,
child: Text("Static sidebar"),
),
),
],
),
Expanded(
child: Navigator(
key: navigatorKey,
initialRoute: '/',
onGenerateRoute: FluroRouter.router.generator,
),
)
],
),
);
}
}
FluroRouter 文件如下所示
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
class FluroRouter {
static Router router = Router();
static Handler _routeOneHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
Container(child: Center(child: Text("Later content for page 1"))));
static Handler _routeTwoHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
Container(child: Center(child: Text("Later content for page 2"))));
static void setupRouter() {
router.define(
'/',
handler: _routeOneHandler,
);
router.define(
'/two',
handler: _routeTwoHandler,
);
}
}
显然,如果用户输入一个 URL,此时什么都不会发生。我认为这是因为 MaterialApp 中的主导航器正在使用来自用户的输入,而不是将其传递给 Scaffold 中的导航器。但我绝对不确定。
任何人都可以指出我实现想要的行为的正确方法吗?
谢谢!
更新 1:
我还尝试过使用构建器来构建 child 并保持其余部分持久性的方法。
(这将我引向我正在寻找的行为,除了 OverLay 错误)
import 'package:flutter/material.dart';
import 'package:newnavigationtest/routes.dart';
void main() {
FluroRouter.setupRouter();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final navigatorKey = GlobalKey<NavigatorState>();
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
key: navigatorKey,
initialRoute: '/',
onGenerateRoute: FluroRouter.router.generator,
builder: (context, child) {
return MainLayout(child: child);
},
);
}
}
class MainLayout extends StatelessWidget {
final Widget child;
MainLayout({@required this.child});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
Column(
children: [
Expanded(
child: Container(
color: Colors.green,
width: 100,
child:
Tooltip(message: "Hello", child: Text("Static sidebar")),
),
),
],
),
Expanded(
child: child,
)
],
),
);
}
}
但这会导致工具提示中缺少 Overlay。
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building Tooltip("Hello", dirty, state: _TooltipState#93c0f(ticker inactive)):
No Overlay widget found.
Tooltip widgets require an Overlay widget ancestor for correct operation.
最佳答案
因为 Fluro没有持久性的重定向,您可能必须让每个页面都有一个 Scaffold使用 AppBar 和 Drawer,最有效的方法是拥有一个可以重复使用的自定义脚手架。
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
void main() {
FluroRouter.setupRouter();
runApp(
MaterialApp(
title: 'Your website',
onGenerateRoute: FluroRouter.router.generator
),
);
}
class CustomScaffold extends StatelessWidget {
final Widget body;
CustomScaffold({this.body});
@override
Widget build(BuildContext context) {
return Scaffold(
//your appbar here
appBar: AppBar(),
//your drawer here
drawer: Drawer(),
body: body,
);
}
}
class FluroRouter {
static Router router = Router();
static Handler _routeOneHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) => PageOne());
static Handler _routeTwoHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) => PageTwo());
static void setupRouter() {
router.define(
'/',
handler: _routeOneHandler,
);
router.define(
'/two',
handler: _routeTwoHandler,
);
}
}
class PageOne extends StatelessWidget {
Widget build(BuildContext context) {
return CustomScaffold(
body: Container(child: Text('Page 1')),
);
}
}
class PageTwo extends StatelessWidget {
Widget build(BuildContext context) {
return CustomScaffold(
body: Container(child: Text('Page 2')),
);
}
}
关于带有持久抽屉和应用栏的 Flutter Web Navigation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61850247/