Flutter中的普通路由与命名路由（Navigator组件）

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

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

 

 

 

• 基本路由

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

import 'package:flutter/material.dart';

void main() {
 runApp(MaterialApp(
   title: "NavigatorWidget",
   home: HomePage(),
 ));
}


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text("跳转到搜索页面"),
          onPressed: (){
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => SearchPage()
              )
            );
          },
        ),
      )
    );
  }
}


class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("搜索页面")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("这是搜索页面"),
          RaisedButton(
            child: Text("返回上一页"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          )
        ],
      ),
    );
  }
}

 

• 基本路由+传参

import 'package:flutter/material.dart';

void main() {
 runApp(MaterialApp(
   title: "NavigatorWidget",
   home: HomePage(),
 ));
}


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text("跳转到搜索页面"),
          onPressed: (){
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => SearchPage("我是传参")
              )
            );
          },
        ),
      )
    );
  }
}


class SearchPage extends StatelessWidget {
  String param;
  SearchPage(this.param);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("搜索页面")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("这是传参值：$param"),
          RaisedButton(
            child: Text("返回上一页"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          )
        ],
      ),
    );
  }
}

 

•  命名路由

import 'package:flutter/material.dart';

void main() {
 runApp(MaterialApp(
   title: "NavigatorWidget",
   initialRoute: "/",
   routes: {
     "/":(context) => HomePage(),
     "/search":(context) => SearchPage(),
   },
 ));
}


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text("跳转到搜索页面"),
          onPressed: (){
            Navigator.of(context).pushNamed("/search");
          },
        ),
      )
    );
  }
}


class SearchPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("搜索页面")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("这是搜索页面"),
          RaisedButton(
            child: Text("返回上一页"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          )
        ],
      ),
    );
  }
}

 

• 命名路由+传参（最常用的）

import 'package:flutter/material.dart';


void main() {
  // 可抽离出去
  final routes = {
    "/":(context) => IndexPage(),
    "/search":(context,{arguments}) => SearchPage(param:arguments),
  };

  // 可抽离出去，作为一个工具类
  var onGenerateRoute = (RouteSettings settings) {
    final String name = settings.name;
    final Function pageContentBuilder = 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;
      }
    }
    return null;
  };

  runApp(MaterialApp(
    title: "NavigatorWidget",
    initialRoute: "/",
    onGenerateRoute: onGenerateRoute,
  ));
}


class IndexPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("主页")),
      body: RaisedButton(
        child: Text("跳转到搜索页面，传参为'id':123"),
        onPressed: () {
          Navigator.pushNamed(context, "/search",arguments: {
            "id":123
          });
        },
        color: Theme.of(context).accentColor,
        textTheme: ButtonTextTheme.primary,
      ),
    );
  }
}


class SearchPage extends StatelessWidget {
  final Map<String,int> param;
  SearchPage({this.param});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("搜索页")),
      body: Text("接受到的传参的值为：${param != null ? param["id"] : 0}"),
    );
  }
}