Navigator.push 是否可以显示不同的 link 页面？

Question

我正在使用 flutter for web 进行开发。

目前可以从主页转到个人资料页面，但是否可以将这些 URL 分开？例如：

Main page : https:// testapp.com/home

Profile page: https:// testapp.com/profile

当我执行 profilePage() 功能时，Navigator.push 将带我到个人资料页面。

   void profilePage() {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => showProfile(),
      ),
    );
  }

showProfile用不同的dart文件执行完成页面导航

 class showProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.white,
          title: const Center(
            child: Text("Test App",
                style:
                    TextStyle(color: Colors.black)),
          )),
      body: Container(
        height: double.infinity,
        color: Colors.white,
      ),
    );
  }
}

目前，主页和个人资料页面具有相同的URL (https:// testapp.com/#/)。因此，即使用户输入testapp.com/profile，也无法跳转到简介页面。我的目的是转到 Navigator 中的另一个 URL。

谢谢。

Answer 1

添加thisdependancy/plugin.

现在，创建一个名为 routing.dart 的文件并添加此代码：-

    class FluroRouting {
      static final router = FluroRouter();
      static Handler _profileHandler = Handler(
          handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
              Profile());
      static Handler _homeHandler = Handler(
          handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
              HomePage());
      static void setupRouter() {
        router.define('/home', handler: _homeHandler,);
        router.define('/profile', handler: _profileHandler,);
router.notFoundHandler = Handler(
        handlerFunc: (BuildContext? context, Map<String, dynamic> params) =>HomePage()
    );
      }
      static void navigateToPage({String routeName,BuildContext context}) {
        router.navigateTo(context, routeName, transition: TransitionType.none);
      }
      static void pushAndClearStackToPage({String routeName,BuildContext context}) {
        router.navigateTo(context, routeName, clearStack: true,transition: TransitionType.none);
      }
    }

现在您需要初始化和设置这些路由，因此将您的 void main 修改为：-

void main()async {
  FluroRouting.setupRouter();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Website',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/home',
      onGenerateRoute: FluroRouting.router.generator,
    );
  }
}

只要您需要导航，只需使用以下代码即可：-

FluroRouting.navigateToPage(routeName:"/profile",context:context);

Answer 2

这个网站帮助了我的问题。

https://medium.com/flutter/flutter-web-navigating-urls-using-named-routes-307e1b1e2050

解决方案；

在main函数中写入如下代码

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/profile': (context) => ProfilePage(),
    },
    title: "test",
    home: (),
  ));
}

在您希望其 URL 成为“domain.com/ profile”的小部件中声明以下内容（确切地说，“domain.com/#/profile”）。

class ProfilePage extends StatelessWidget {
    static const String route = '/profile';
}

最后，调用这个。

onPressed: () {
    Navigator.of(context).pushNamed(ProfilePage.route);
},

Navigator.push 是否可以显示不同的 link 页面？

Is it possible to display different link pages by Navigator.push?

dart

flutter

flutter-web