Flutter中路由返回的多种方式

越陌度阡

发布于 2022-05-06 14:58:48

1.3K0

发布于 2022-05-06 14:58:48

1. 返回上一级路由

Navigator.of(context).pop();

在页面中调用这个方法可以返回进入当前页面的上一级页面。

2. 替换路由

Navigator.of(context).pushReplacementNamed('目标页面路由');

当页面中跳转顺序是A页面-B页面-C页面，如果在B页面中使用上面这个命令跳转到C页面，在C页面返回时会直接跳转到A页面。如果在A页面也是使用的此命令跳转到B页面，那么在C页面中返回时会返回A页面的上一级页面。

3. 返回到指定的路由地址

Navigator.of(context).pushAndRemoveUntil(
    // 返回到指定的路由（Tabs为页面组件，需要在顶部引入，index为组件的参数)
    new MaterialPageRoute(builder:(context)=>new Tabs(index:2)),
    // 清空路由
    (route)=>route==null
);

上面这个命令相当于是进行路由重定向，可以很灵活的控制路由跳转。需要注意的是，要跳转到的目标页面组件必须在顶部引入。

4. 路由跳转实例

项目结构：

main.dart 主文件代码：

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

// 引入路由管理
import 'routes/Routes.dart';

// 主函数
void main(){
    runApp(MyApp());
}


class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            // 初始化的路由
            initialRoute: '/',
            // 监听路由事件
            onGenerateRoute:onGenerateRoute,
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow)
        );
    }
}

Routes.dart 路由文件代码：

// lib/routes/Routes.dart
import 'package:flutter/material.dart';

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

import '../pages/user/Login.dart';
import '../pages/user/RegisterFirst.dart';
import '../pages/user/RegisterSecond.dart';
import '../pages/user/RegisterThird.dart';

final routes={
    '/':(context)=>Tabs(),
    '/form':(context)=>FormPage(),
    '/search':(context,{arguments})=>SearchPage(arguments:arguments),

    '/login':(context)=>LoginPage(),
    '/registerFirst':(context)=>RegisterFirstPage(),
    '/registerSecond':(context)=>RegisterSecondPage(),
    '/registerThird':(context)=>RegisterThirdPage()
};


Function 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;
        }
    }
};

Tabs.dart 文件代码：

// lib/pages/Tabs.dart
import "package:flutter/material.dart";

// 引入子页面
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

// 标签切换页
class Tabs extends StatefulWidget {
    final index;
    Tabs({Key key,this.index=0}) : super(key: key);
    _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs>{

    // 当前选中标签的下标
    int _currentIndex;
    // 当前页面数组
    List _pageList = [
        HomePage(),
        CategoryPage(),
        SettingPage()
    ];
    _TabsState(index){
        this._currentIndex = index;
    }
    @override
    Widget build(BuildContext context) {
    return Container(
        child: Scaffold(
            // 导航条
            appBar:AppBar(title:Text('Flutter App')),
            // 主体
            body:this._pageList[this._currentIndex],
            // 底部导航条
            bottomNavigationBar: BottomNavigationBar(
                // 当前菜单下标
                currentIndex: this._currentIndex,
                // 点击事件,获取当前点击的标签下标
                onTap: (int index){
                    // 改变状态
                    setState(() {
                       this._currentIndex=index;
                    });
                },
                // 图标大小
                iconSize: 30.0,
                // 选中图标的颜色
                fixedColor: Colors.red,
                // 多个标签页的动画效果
                type: BottomNavigationBarType.fixed,
                items: [
                    // 只能是BottomNavigationBarItem的类型
                    BottomNavigationBarItem(
                        icon:Icon(Icons.home),
                        label:"首页"
                    ),
                    BottomNavigationBarItem(
                        icon:Icon(Icons.category),
                        label:"分类"
                    ),
                    BottomNavigationBarItem(
                        icon:Icon(Icons.settings),
                        label:"设置"
                    )
                ]
            ),
        ));
    }
}

Search.dart 文件代码：

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


// 搜索页面
class SearchPage extends StatefulWidget {
    final Map arguments;
    // 有状态组件接受传参
    SearchPage({Key key,this.arguments}) : super(key: key);
   _SearchPageState createState() => _SearchPageState(arguments:this.arguments);

}

class _SearchPageState extends State<SearchPage> {

    Map arguments;
    _SearchPageState({this.arguments});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title:Text('搜索')
            ),
            body:Container(
                child:Text('搜索商品ID为${arguments["id"]}')
            )
        );
    }
}

Form.dart 文件代码：

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

// 表单页面
class FormPage extends StatelessWidget {
    final String title;
    // 无状态组件接受传参
    FormPage({this.title="表单"});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            // 浮动按钮
            floatingActionButton: FloatingActionButton(
                child: Text('返回'),
                // 点击事件
                onPressed: (){
                    // 返回上一级页面
                    Navigator.of(context).pop();
                },
            ),
            appBar: AppBar(
                title:Text(this.title)
            ),
            body: ListView(
                children: <Widget>[
                    ListTile(
                        title:Text('这是表单页面')
                    )
                ]
            ),
        );
    }
}

// lib/pages/user/Login.dart
import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
    const LoginPage({Key key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("登录")),
            body: Center(
                child: Column(
                    children: <Widget>[
                        SizedBox(height: 40),
                        Text('欢迎使用本程序'),
                        RaisedButton(
                            child: Text("立即登录"),
                            onPressed: () {
                                // 返回上一页
                                Navigator.of(context).pop();
                            },
                        )
                    ],
                ),
            ),
        );
    }
}

RegisterFirst.dart 文件代码：

// lib/pages/user/RegisterFirst.dart
import 'package:flutter/material.dart';

class RegisterFirstPage extends StatelessWidget {
    const RegisterFirstPage({Key key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("第一步：输入手机号")),
            body: Center(
                child:Column(
                    children: <Widget>[
                        SizedBox(height: 40),
                        Text("请输入您的手机号"),
                        SizedBox(height: 40),
                        RaisedButton(
                            child: Text('下一步'),
                            onPressed: () {
                                // 正常路由跳转，左上角点击返回时会原路返回
                                Navigator.pushNamed(context, '/registerSecond');

                                // 替换路由跳转，左上角点击返回时会忽略本次跳转，直接返回到上一级路由
                                // Navigator.of(context).pushReplacementNamed('/registerSecond');
                            },
                        )
                    ],
                )
            )
        );
    }
}

RegisterSecond.dart 文件代码：

// lib/pages/user/RegisteSecond.dart
import 'package:flutter/material.dart';

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

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("第二步：输入验证码")),
            body: Center(
                child:Column(
                    children: <Widget>[
                        SizedBox(height: 40),
                        Text("请输入验证码完成注册"),
                        SizedBox(height: 40),
                        RaisedButton(
                            child: Text('下一步'),
                            onPressed: () {

                                // 正常路由跳转，左上角点击返回时会原路返回
                                Navigator.pushNamed(context, '/registerThird');

                                // 替换路由跳转，左上角点击返回时会忽略本次跳转，直接返回到上一级路由
                                // Navigator.of(context).pushReplacementNamed('/registerThird');
                            },
                        )
                    ],
                )  
            )
        );
    }
}

RegisterThird.dart 文件代码：

// lib/pages/user/RegisteThird.dart
import 'package:flutter/material.dart';

// 跳转到指定路由必须引入相应的路由页面组件
import '../Tabs.dart';

class RegisterThirdPage extends StatelessWidget {
    const RegisterThirdPage({Key key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("第三步：完成注册")),
            body: Center(
                child: Column(
                    children: <Widget>[
                        SizedBox(height: 40),
                        Text("请输入密码完成注册"),
                        SizedBox(height: 40),
                        RaisedButton(
                            child: Text('确定'),
                            onPressed: () {
                                // 清除之前所有push的页面路由，直到跳转到指定的路由
                                Navigator.of(context).pushAndRemoveUntil(
                                    new MaterialPageRoute(builder:(context)=>new Tabs(index:2)),
                                    (route)=>route==null
                                );
                            },
                        )
                    ],
                )
            )
        );
    }
}

Category.dart 文件代码：

// lib/pages/tabs/Gategory.dart
import "package:flutter/material.dart";

// 分类页面
class CategoryPage extends StatefulWidget {
    CategoryPage({Key key}) : super(key: key);
    _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
    @override
    Widget build(BuildContext context) {
        return Column(
            // 主轴对齐式式
            mainAxisAlignment:MainAxisAlignment.center,
            // 交叉轴对齐方式
            crossAxisAlignment: CrossAxisAlignment.center,
            children:<Widget>[
                RaisedButton(
                    child: Text("跳转到表单页面"),
                    // 点击事件
                    onPressed: () {
                        Navigator.pushNamed(context, '/form');
                    },
                    color: Theme.of(context).accentColor,
                    textTheme: ButtonTextTheme.primary
                )
            ]
        );
    }
}

Home.dart 文件代码：

// lib/pages/tabs/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 Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                RaisedButton(
                    child: Text("跳转到搜索页面"),
                    // 点击事件
                    onPressed: () {
                        // 跳转路由传值
                        Navigator.pushNamed(context, '/search',arguments: {
                            "id":123
                        });
                    },
                    color: Theme.of(context).accentColor,
                    textTheme: ButtonTextTheme.primary
                )
            ],
        );
    }
}

Setting.dart 文件代码：

// lib/pages/tabs/Setting.dart
import "package:flutter/material.dart";

// 设置页面
class SettingPage extends StatefulWidget {
    SettingPage({Key key}) : super(key: key);
    _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Column(
                children: <Widget>[
                    RaisedButton(
                        child: Text("跳转到登录页面"),
                        onPressed: () {
                            Navigator.pushNamed(context, '/login');
                        },
                    ),
                    RaisedButton(
                        child: Text("跳转到注册页面"),
                        onPressed: () {
                            Navigator.pushNamed(context, '/registerFirst');
                        },
                    ),
                ],
            )
        );
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-12-26，如有侵权请联系 cloudcommunity@tencent.com 删除

dart