Flutter | 路由管理_网络技术_宿州市腾雀网络科技有限公司

Flutter | 路由管理

发布时间 - 2025-07-19 00:00:00 点击率：次

在 flutter 应用中，路由管理是导航到不同页面的关键机制。本文将探讨如何创建和使用新路由，展示如何通过文本按钮进行页面跳转，并介绍 materialpageroute 的功能和 navigator 的用法。

什么是路由？

在 Flutter 中，路由（Route）指的是一个屏幕或页面。每个路由都由一个 Widget 构建，可以通过 Navigator 进行管理和切换。

示例1：创建一个新的路由，命名 NewRoute

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FlutterStudy"),
      ),
      body: Center(
        child: Text(
          "This is new route",
          style: Theme.of(context).textTheme.headline3,
        ),
      ),
    );
  }
}

示例2：创建一个文本按钮，点击进行跳转

child: Text("点击跳转"),
textColor: Colors.red,
onPressed: () {
  //导航到新的路由
  Navigator.push(context, MaterialPageRoute(builder: (context) {
    return NewRoute();
  }));
},

MaterialPageRoute

MaterialPageRoute 是 Material 组件库提供的组件，用于实现与平台页面切换动画风格一致的切换动画。MaterialPageRoute 继承自 PageRoute 类，后者是一个抽象类，表示整个屏幕空间的一个模态路由页面。它定义了路由构建及切换时过渡动画的相关接口和属性。如果需要自定义路由切换动画，可以通过继承 PageRoute 来实现。

MaterialPageRoute 的构造方法

MaterialPageRoute({
  required this.builder,
  RouteSettings? settings,
  this.maintainState = true,
  bool fullscreenDialog = false,
})

builder 是 WidgetBuilder 类型的回调函数，负责构建路由的具体内容，返回一个 widget。
settings 包含路由的配置信息，例如路由名称和是否初始路由等。
maintainState 默认为 true，表示当入栈一个新的路由时，原来的路由仍然会保存在内存中。如果想在路由没用的时候释放其所占用的资源，可以设置为 false。
fullscreenDialog 表示新的路由是否是一个全屏的模态对话框。在 iOS 中，若此参数为 true，新页面会从底部滑入，而不是水平方向。

Navigator

Navigator 是一个路由管理组件，提供打开和退出路由的方法。它通过栈来管理活动路由集合，通常屏幕显示的页面就是栈顶路由。

打开一个页面

return Navigator.of(context)!.push(route);

将给定的路由入栈（打开页面），返回一个 future 对象，用于接收该路由出栈时返回的数据。

关闭一个页面

Navigator.of(context)!.pop(result);

将栈顶路由出栈，result 为要返回给上一个页面的数据。

路由传值

class TipRoute extends StatelessWidget {
  TipRoute({Key key, this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("提示"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: [
              Text(text),
              RaisedButton(
                onPressed: () => Navigator.pop(context, "我是返回值"),
                child: Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

在界面中添加了一个 appbar，中间显示一个文本和一个 RaisedButton，点击后进行 pop 并传入要返回的值。

@override
Widget build(BuildContext context) {
  return Center(
    child: RaisedButton(
      onPressed: () async {
        await Navigator.push(context, MaterialPageRoute(builder: (context) {
          return TipRoute(text: "我是参数");
        })).then((value) => print("路由返回值 $value"));
      },
      child: Text("打开提示页面"),
    ),
  );
}

在 onPressed 方法中，异步执行这个函数，最终将返回值打印出来。

运行上面的代码，点击 "打开提示页面"，效果如下所示：

打印的结果：

I/flutter (23778): 路由返回值 我是返回值

需要注意的是：

参数是通过构造方法传入的。
如果点击左上角或者返回按钮进行返回，则页面返回的值为 null。

命名路由

命名路由是指给路由起一个名字，通过名字直接打开路由。

路由表

路由表是一个 map，key 为路由名字，value 是一个 builder 的回调函数，用于生成相应的路由 widget。如下：

final Map? routes;

注册路由

在 MaterialApp 里面，添加 routes 属性即可，如下：

return MaterialApp(
  //app name
  title: 'FlutterStudy',
  theme: ThemeData(
    primarySwatch: Colors.red,
  ),
  routes: {
    "new_page": (context) => NewRoute(),
    "/": (context) => MyHomePage(title: "Flutter Study")
  },
  //应用首页路由
  home: MyHomePage(title: 'Flutter Study'),
);

打开路由页面

child: Text("自定义 Button"),
onPressed: () {
  Navigator.pushNamed(context, "router_test");
}

在点击的事件中，跳转到对应的路由页面。

带参数的命名路由传递

在路由表里面注册：

"new_page": (context) => NewRoute(),

接受参数：

@override
Widget build(BuildContext context) {
  var args = ModalRoute.of(context).settings.arguments;
  //......
}

在跳转的时候发送数据即可：

Navigator.pushNamed(context, "new_page", arguments: "Hello World");

路由生成钩子

在打开某些页面时，可能需要做一些权限检测，如用户是否登录，是否需要密码等。如果每次打开路由时都要去判断一下会非常麻烦，这种情况可以通过 MaterialApp 实现。

MaterialApp 有一个 onGenerateRoute 属性，他在打开路由时可能会被调用。之所以说可能，是因为当调用 Navigator.pushNamed() 打开路由时，如果指定的路由在路由表中已经注册，则会调用路由表中的 builder 函数来生成路由组件；如果路由表中没有注册，才会调用 onGenerateRoute 来生成路由。

... //省略无关代码
onGenerateRoute:(RouteSettings settings){
  return MaterialPageRoute(builder: (context){
    String routeName = settings.name;
    // 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由，
    // 引导用户登录；其它情况则正常打开路由。
  });
});

参考资料：

# ai # red # NULL # 回调函数 # 继承 # 接口 # 栈 # map # 对象 # 事件 # 异步 # ios # flutter # 是一个 # 我是 # 路由表 # 跳转 # 返回值 # 可以通过 # 自定义 # 创建一个 # 回调 # 的是

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：亿图脑图怎样调整画布大小_拖边框或设尺寸适配内容【方法】

下一篇：微信小程序 setData使用方法及常用错误解决办法

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：亿图脑图怎样调整画布大小_拖边框或设尺寸适配内容【方法】

下一篇：微信小程序 setData使用方法及常用错误解决办法