您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-13(中的普通路由、普通路由传值、命名路由、命名路由传值)

2020-04-30【Flutter】897人已围观

简介## 一、Flutter 中的路由 `Flutter` 中的路由通俗的讲就是页面跳转。在 `Flutter` 中通过 `Navigator` 组件管理路由导航。并提供了管理堆栈的方法。如：`Navigator.push` 和 `Navigator.pop` `Flutter` 中给我们提供了两种配置路由跳转的方式： 1. 基本路由 2. 命名路由 ## 二、Flutter 中的基本路由使用比如我们现在想从 `HomePage` 组件跳转到 `SearchPage` 组

## 一、Flutter  中的路由

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

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

## 二、Flutter 中的基本路由使用

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

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

`import '../SearchPage.dart';`

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

```
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        child: Text("跳转到搜索页面"),
        onPressed: () {
          Navigator.of(context)
              .push(
                MaterialPageRoute(builder: (BuildContext context) {
                return SearchPage();
              }
          ));
        },
        color: Theme.of(context).accentColor,
        textTheme: ButtonTextTheme.primary);
  }
}

```

**Search.dart**

```
import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  const SearchPage({Key key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("搜索页面"),
      ) ,
      body: Text("搜索页面内容区域"),
    );
  }
}

```

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

1. 定义值，在构造方法中接受值
2. 在跳转的方法中传值 `return SearchPage(title:"传值搜索key");`

> search.dart

```
import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  String title;
  SearchPage({this.title = "默认值"});// 构造方法接受可选值

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("搜索页面"),
      ) ,
      body: Text('传值：'+this.title),
    );
  }

}

```

> home.dart

```
import 'package:flutter/material.dart';
import '../Search.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        child: Text("跳转到搜索页面"),
        onPressed: () {
          // 跳转路由
          Navigator.of(context)
              .push(
                MaterialPageRoute(
                  builder: (BuildContext context) {
                  return SearchPage(title:"传值搜索key");
                }
              )
          );
        },
        color: Theme.of(context).accentColor,
        textTheme: ButtonTextTheme.primary);
  }
}

```

## 四、Flutter 中的命名路由

1. `MaterialApp` 中定义路由规则
2. 通过 `Navigator.pushNamed(context, '/form');` 跳转路由

> main.dart

```
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
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      routes: {// 定义路由
        '/search': (contxt) => SearchPage(),
        '/form': (context) => FormPage(),
      },
    );
  }
}

```

> Home.dart

```
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        child: Text("跳转到搜索页面"),
        onPressed: () {
          // 路由跳转
          Navigator.pushNamed(context, '/search');
        },
        color: Theme.of(context).accentColor,
        textTheme: ButtonTextTheme.primary);
  }
}

```

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

**1 、 配置路由**

> main.dart

```
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 routes = {
    '/': (contxt) => Tabs(),
    '/search': (contxt, {arguments}) => SearchPage(arguments: arguments),
    '/form': (context) => FormPage(),
  };
  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.跳转路由**

> Home.dart

```
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        child: Text("跳转到搜索页面"),
        onPressed: () {
          // 路由跳转
          Navigator.pushNamed(context, '/search',arguments: {
            "id":20
          });
        },
        color: Theme.of(context).accentColor,
        textTheme: ButtonTextTheme.primary);
  }
}

```

> 覆盖路由

`Navigator.pushReplacementNamed(context, "/login");`

**3.接受参数**

> Search.dart

```
import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  final Map arguments;
  SearchPage({this.arguments});

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("搜索页面"),
      ) ,
      body: Text('传值：${arguments != null ? arguments['id'] : '0'}'),
    );
  }
}

```

## 六、Flutter  中的命名路单独抽离到一个文件

> main.dart

```
import 'package:flutter/material.dart';

import 'routes/routes.dart';

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
        // home: Tabs(),
        initialRoute: '/index',
        onGenerateRoute: onGenerateRoute,
    );
  }
}

```

> routes/routes.dart

```
import 'package:flutter/material.dart';

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

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

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-12( BottomNavigationBar 自定义底部导航条、以及实现页面切换)

下一篇：flutter-14（路由中的路由换路返回到根路由)