Flutter之基本路由，命名路由跳转，返回上一页，替换路由和返回根路由——Flutter基础系列

Posted 2022-12-05 houruoyu3

需求：

今天为大家介绍一下Flutter是如何进行页面跳转，路由管理的。

一、基本路由

1、基本路由使用

假设我们需要从A页面跳转到basic页面，则我们需要在A页面引入

import '../basic.dart';

然后在A页面通过以下方法跳转：

 RaisedButton(
             child: Text("跳转到基本路由页面"),
             onPressed: ()
               Navigator.of(context).push(
                   MaterialPageRoute(
                     builder:(BuildContext context) 
                       return basic(); 
                     
                   )
               );
             ,
             color: Colors.blue
           ),

2、基本路由传值

还是一样在A页面引入

import '../basic.dart';

然后在A页面通过以下方法跳转：

 RaisedButton(
                child: Text("跳转到基本路由页面并传值"),
                onPressed: ()
                  Navigator.of(context).push(
                      MaterialPageRoute(
                          builder:(BuildContext context)
                            return basic(content:"传递过去的值为666");
                          
                      )
                  );
                ,
                color: Colors.blue
            ),

二、命名路由

1、命名路由抽离到一个文件中

新建一个Routes.dart的文件

import 'package:flutter/material.dart';
import '../pages/routeJmp/transmit.dart';

//配置路由
final routes=
  '/transmit':(context,arguments)=> transmit(content: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;
    
  
;

2、跳转参数

 RaisedButton(
                child: Text("跳转到命名路由页面"),
                onPressed: ()
                  //路由跳转
                  Navigator.pushNamed(context, '/transmit');
                ,
                color: Colors.blue
            ),
            RaisedButton(
                child: Text("跳转到命名路由页面并传值"),
                onPressed: ()
                  //路由跳转
                  Navigator.pushNamed(context, '/transmit',arguments:"，传值结果为666");
                ,
                color: Colors.blue
            ),

3、接收参数

import 'package:flutter/material.dart';


class transmit extends StatefulWidget 
  String content;
  transmit(this.content);
  @override
  _transmitState createState() => _transmitState();


class _transmitState extends State<transmit> 
  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: AppBar(
        title: Text("这是命名路由页面$widget.content!=null?widget.content:""",style: TextStyle(fontSize:15),),
      ),
      body: ListView(
        children: [

        ],
      ),
    );
  

4、命名路由返回上一页的用法

Navigator.of(context).pop();

调用该方法可以返回上一页

4、命名路由如何替换路由

Navigator.of(context).pushReplacementNamed('/transmitTwo');

调用该方法可以关闭当前页面，并跳转到你需要的页面

5、返回根路由

Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context) => new Home()), (route) => route == null );

关闭当前所有页面，返回到根页面或者打开指定页面，Home()是我这个项目的根页面。

基础篇

---

Flutter之自定义底部导航条以及页面切换实例——Flutter基础系列

Flutter之自定义顶部Tab——Flutter基础系列

Flutter之抽屉组件drawer,设置drawer宽度——Flutter基础系列

Flutter之自定义按钮RaisedButton、OutlineButton、IconButton等——Flutter基础系列

Flutter之实现生成二维码，扫描二维码——Flutter基础系列

Flutter之基本路由，命名路由跳转，返回上一页，替换路由和返回根路由——Flutter基础系列