Flutter 中的路由配置

一、关于Flutter 中的路由配置

Flutter中的路由通俗的讲就是页面跳转。在Flutter中通过Navigator组件管理路由导航。 并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop

Flutter中给我们提供了两种配置路由跳转的方式：1、基本路由 2、命名路由

二、Flutter 中的基本路由使用

比如我们现在想从HomePage组件跳转到SearchPage组件。

1、需要在HomPage中引入SearchPage.dart

import '../SearchPage.dart';

2、在HomePage中通过下面方法跳转

RaisedButton(
            child: Text("跳转到搜索页面"),
            onPressed: (){
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context){
                      return SearchPage();
                  }
                )
              );
                
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary
)

三、Flutter 中的基本路由跳转传值

比如我们现在想从HomePage组件跳转到SearchPage组件传值。 1、需要在HomPage中引入SearchPage.dart

import '../SearchPage.dart';

2、在HomePage中通过下面方法跳转

RaisedButton(
            child: Text("跳转到搜索页面"),
            onPressed: (){
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context){
                      return SearchPage(title:"表单");  //传值
                  }
                )
              );
                
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary
)

四、Flutter 中的命名路由

1、配置路由

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';

import 'pages/Search.dart';
import 'pages/Form.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      // home:Tabs(),
      initialRoute: '/',
      routes: {
        '/':(contxt)=>Tabs(),
        '/search':(contxt) =>SearchPage(),
        '/form': (context) => FormPage(),
      },
    );
  }
}

2、路由跳转

RaisedButton(
            child: Text("跳转到搜索页面"),
            onPressed: (){
              Navigator.pushNamed(context, '/search');                
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary
)

五、Flutter 中的命名路由跳转传值

官方文档：https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

1、配置路由：

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final Map<String,Function> routes = {
    '/': (contxt) => Tabs(),
    '/search': (contxt) => SearchPage(),
    '/form': (context, {arguments}) => FormPage(arguments: arguments),
  };

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Tabs(),
        onGenerateRoute: (RouteSettings settings) {
          // 统一处理
          final String? name = settings.name;
          final Function? pageContentBuilder = this.routes[name];
          if (pageContentBuilder != null) {
            if (settings.arguments != null) {
              final Route route = MaterialPageRoute(
                  builder: (context) => pageContentBuilder(context,
                      arguments: settings.arguments));
              return route;
            } else {
              final Route route = MaterialPageRoute(
                  builder: (context) => pageContentBuilder(context));
              return route;
            }
          }
        });
  }
}

2、跳转传值

 RaisedButton(
           child: Text("跳转到表单演示页面"),
           onPressed: (){
             Navigator.pushNamed(context, '/form',arguments: {
               "id":20
             });                
           },
           color: Theme.of(context).accentColor,
           textTheme: ButtonTextTheme.primary
)

3、接收参数

import 'package:flutter/material.dart';

class FormPage extends StatelessWidget {
  final Map arguments;
  FormPage({this.arguments});
 
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("搜索"),
      ),
      body:Text("我是一个表单页面 ${arguments != null ? arguments['id'] : '0'}")

    );
  }
}