navigation - Flutter web 浏览器中不显示完整 URL

Question

在我的应用程序中，我设置了一个自定义导航器，并使导航系统正常工作，浏览器不显示完整的网址，它始终显示 http://localhost:55865/#/ 。 。 你能发现我做错了什么吗？

我将所有路线声明为:

const String HomeRoute = '/home';
const String AboutRoute = '/about';
const String RetailerAccessRoute = '/retailers';
const String TermsOfServiceRoute = '/termsOfService';
const String PrivacyPolicyRoute = '/privacyPolicy';
const String PrivacySettingsRoute = '/privacySettings';
const String CommunityGuidelinesRoute = '/communityGuidelines';
const String LegalNoticeRoute = '/legalNotice';

然后我有 generateRoute (由 MaterialApp 的 onGenerateRoute: 回调调用)，它使用开关返回相应的 Widget应用的过渡效果:

Route<dynamic> generateRoute(RouteSettings settings) {
//  print('generatedRoute: ${settings.name}');
  switch (settings.name) {
    case HomeRoute:
      return _getPageRoute((HomePage()));
    case AboutRoute:
      return _getPageRoute(AboutPage());
    case RetailerAccessRoute:
      return _getPageRoute(RetailerAccess());
    case TermsOfServiceRoute:
      return _getPageRoute(TermsOfService());
    case PrivacyPolicyRoute:
      return _getPageRoute(PrivacyPolicy());
    case CommunityGuidelinesRoute:
      return _getPageRoute(CommunityGuidelines());
    case LegalNoticeRoute:
      return _getPageRoute(LegalNotice());
  }
}

PageRoute _getPageRoute(Widget child) {
  return _FadeRoute(
    child: child,
  );
}

class _FadeRoute extends PageRouteBuilder {
  final Widget child;
  _FadeRoute({this.child})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              child,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
                opacity: animation,
                child: child,
          ),
        );
}

navigateTo() 方法实际上确实推送了路线:

class NavigationService {
  final GlobalKey<NavigatorState> navigatorKey = NavigatorKeys.webNavigatorGlobalKey;
//  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  
Future<dynamic> navigateTo(String routeName) {
    return navigatorKey.currentState.pushNamed(routeName);
  }
}

navigateTo() 在 NavigationBar 的按钮(NavigationBarItem) onPressed: 回调中调用:

class NavigationBarItem extends StatelessWidget {
  final String title;
  final String navigationPath;
  const NavigationBarItem({this.title, this.navigationPath});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.transparent,
      elevation: 0,
      hoverColor: Colors.transparent,
      hoverElevation: 0,
      highlightColor: Colors.transparent,
      highlightElevation: 0,
      splashColor: Colors.transparent,
      child:
      Text('$title',
        style: TextStyle(
            fontSize: 12,
            color: Colors.white,
            fontWeight: FontWeight.w400),
      ),
      onPressed: () {
        locator<NavigationService>().navigateTo(navigationPath);
      },
    );
  }
}

主页路线按钮示例:

 NavigationBarItem(
                title: AppLocalizations.instance.text('Home'),
                navigationPath: HomeRoute,
              ),

MainLayout 绘制由 NavigationBar 和传入的 Widget 组成的 Screen。

class MainLayout extends StatelessWidget {
  final Widget child;
  const MainLayout({Key key,this.child}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInformation) => Scaffold(
        drawer: sizingInformation.deviceScreenType == DeviceScreenType.mobile
            ? NavigationDrawer()
            : null,
        backgroundColor: Colors.transparent,
        body: CenteredWidget(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              NavigationBar(),
              Expanded(
                child: Navigator(
                  key: locator<NavigationService>().navigatorKey,
                  onGenerateRoute: generateRoute,
                  initialRoute: CyclistsLandingRoute,
                ),
//              child:child,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在 main() MaterialApp 中，如果平台是 Web，则返回 MainLayout；如果平台不是 Web，则返回实际应用程序:

        home: UniversalPlatform.isWeb
            ? MainLayout()
            : RetailerAccess(),
``

Answer 1

调用super时需要在设置中添加路由名称。更改后 _FadeRoute 如下所示:

class _FadeRoute extends PageRouteBuilder {
    final Widget child;
    String route;

    _FadeRoute({this.child, this.route})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              child,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
                opacity: animation,
                child: child,
          ),
          settings: RouteSettings(name: route)
        );
}

在主方法中

MaterialApp(
    ...
     builder: (context, child) {
            return MainTemplateLayout(
              child: child,
            );
      },
      navigatorKey: RouterNavigationService().navigatorKey,
      onGenerateRoute: generateRoute,
      initialRoute: "/",
...

和MainTemplateLayout中

build(BuildContext context){
...
  Container(
    child: child, // this is child passed to MainTemplate
  ) 
}
...