Laravel-类似于 Flutter 中的路由模式

Question

我在 Flutter 中寻找类似于 Laravel/Lumen 的路由，它遵循以下模式：

project/{project}

其中 {project} 是必需的 ID。明确指定 ID 很重要，因为该应用程序在网络上被大量使用，并且用户为他们的项目和组织添加书签是众所周知的必要性。

到目前为止我尝试过的：

initialRoute: '/',
routes: <String, WidgetBuilder> {
   // '/': (context) => Dashboard(), // error LOL
   '/login': (context) => Login(),
   '/projects': (context) => Projects(),
   '/project/{id}': (context) => Dashboard(), // <-- just an example of what I want. obviously not working
},

虽然 login 和 projects 路由有效，但 project/{id} 路由无效。

非常感谢任何帮助。

Answer 1

就理解您的想法而言，通过小部件构造函数传递数据总是更好。

class DashBoard extends StatefulWidget {
  final int id;

  const DashBoard({Key key, this.id}) : super(key: key);
  @override
  _DashBoardState createState() => _DashBoardState();
}

class _DashBoardState extends State<DashBoard> {
  void initState() {
    // you can use the id here
    print(widget.id);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

然后您可以导航为：

Navigator.push(
            context,
            new MaterialPageRoute(
              builder: (context) => DashBoard(
                id: 1,
              ),
            ),
          );

希望这会有所帮助

Answer 2

或者，您可以按照以下方式进行操作

定义您需要传递的参数。

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

创建一个提取参数的小部件

// A widget that extracts the necessary arguments from the ModalRoute.
class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    // Extract the arguments from the current ModalRoute settings and cast
    // them as ScreenArguments.
    final ScreenArguments args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

在路由中注册小部件table

MaterialApp(
  routes: {
    ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
  },
);

导航到小部件

// A button that navigates to a named route. The named route
// extracts the arguments by itself.
RaisedButton(
  child: Text("Navigate to screen that extracts arguments"),
  onPressed: () {
    // When the user taps the button, navigate to a named route
    // and provide the arguments as an optional parameter.
    Navigator.pushNamed(
      context,
      ExtractArgumentsScreen.routeName,
      arguments: ScreenArguments(
        'Extract Arguments Screen',
        'This message is extracted in the build method.',
      ),
    );
  },
),

成功

Answer 3

Flutter 的路由一团糟。虽然它的默认路由在移动和桌面应用程序上是可以的，但网络应用程序需要有动态路由支持，如 Laravel 和 Angular，在 URL 和那些中有显式参数嵌入的东西您实际上添加书签是可以接受的。在撰写本文时，它的网络支持仍处于测试阶段。

我找到的一个解决方案是 fluro

添加到pubspec.yaml

dependencies:
  fluro:
    git: git://github.com/theyakka/fluro.git

创建应用-router.dart

import 'package:fluro/fluro.dart';
import 'package:proj/pages/mypage.dart';
import 'package:proj/pages/anotherpage.dart';

class AppRouter {
  static final AppRouter _instance = new AppRouter._internal();
  final Router _router = new Router();

  factory AppRouter(context) {
    return _instance;
  }

  AppRouter._internal();

  // singleton
  Router router() {
    return _router;
  }

  void configureRoutes() {
    _router.define("/user/:id",
        handler: Handler(handlerFunc: (context, Map<String, dynamic> params) {
          return MyPage(id: params['id'][0].toString());
    }));

    _router.define("/another-route/:id",
        handler: Handler(handlerFunc: (context, Map<String, dynamic> params) {
          return AnotherPage(id: params['id'][0].toString());
    }));
  }
}

使用：

new AppRouter(context).router().navigateTo(context,                                      "/user/" + org['id'].toString());

完成！

Laravel-类似于 Flutter 中的路由模式

Laravel-like routing pattern in Flutter

routes

parameter-passing

react-router

flutter

或者，您可以按照以下方式进行操作