Flutter：路由管理—HI技术分享

Flutter：路由管理

xiaohai 2021-08-10 20:12:17 共2112人围观标签： Flutter

简介Flutter 提供了基本路由和命名路由两种方式，来管理页面间的跳转。其中，基本路由需要自己手动创建页面实例，通过 Navigator.push 完成页面跳转；而命名路由需要提前注册页面标识符和页面创建方法，通过 Navigator.pushNamed 传入标识符实现页面跳转。

Flutter 提供了基本路由和命名路由两种方式，来管理页面间的跳转。其中，基本路由需要自己手动创建页面实例，通过 Navigator.push 完成页面跳转；而命名路由需要提前注册页面标识符和页面创建方法，通过 Navigator.pushNamed 传入标识符实现页面跳转。

一、基本路由

1.1、基本路由跳转

基本路由跳转主要代码是：

Navigator.push(context, MaterialPageRoute(builder: (context) {
    return OnePage();//页面类
}));

全部代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // appBar: AppBar(
        //   title: new Text('MaterialApp示例'),
        // ),
        body: AppHomePage(),
      ),
      color: Colors.yellow,
      debugShowMaterialGrid: false, //显示网格
      debugShowCheckedModeBanner: false, //去掉右上角的debug
      title: 'Material Design', //标题
      theme: ThemeData(
        primaryColor: Colors.yellow[500], //设置应用的主要颜色为黄色
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("首页"),
        TextButton(
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return OnePage();
            }));
          },
          child: Text("基本路由跳转"),
        )
      ],
    ));
  }
}

//新页面
class OnePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('基本路由跳转页面'),
        elevation: 0.0,
      ),
      body: Center(
        child: Text("基本路由跳转页面"),
      ),
    );
  }
}

1.2、基本路由A->B传递参数

需要在B页面的类新增构造方法，因为我这里使用的StatelessWidget组件

final String title;
OnePage({Key? key, required this.title}) : super(key: key);

然后在A页面的路由跳转中传递值即可：

Navigator.push(context, MaterialPageRoute(builder: (context) {
    return OnePage(
        title: '我是Flutter',
    );
}));

完整代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // appBar: AppBar(
        //   title: new Text('MaterialApp示例'),
        // ),
        body: AppHomePage(),
      ),
      color: Colors.yellow,
      debugShowMaterialGrid: false, //显示网格
      debugShowCheckedModeBanner: false, //去掉右上角的debug
      title: 'Material Design', //标题
      theme: ThemeData(
        primaryColor: Colors.yellow[500], //设置应用的主要颜色为黄色
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("首页"),
        TextButton(
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return OnePage(
                title: '我是Flutter',
              );
            }));
          },
          child: Text("基本路由跳转"),
        )
      ],
    ));
  }
}

class OnePage extends StatelessWidget {
  // Declare a field that holds the Todo
  final String title;

  OnePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('基本路由跳转页面'),
        elevation: 0.0,
      ),
      body: Center(
        child: Text('基本路由跳转页面-传值内容：$title'),
      ),
    );
  }
}

1.3、基本路由B页面返回到A页面传值

路由弹出栈添加参数

Navigator.pop(context, '我是返回值');

路由入栈处理，需要异步接收，关键字async和await

onPressed: () async {
    var result = await Navigator.push(context,
        MaterialPageRoute(builder: (context) {
            return OnePage(
                title: '我是Flutter',
        );
    }));
    print(result);
},

这里直接打印出来的结果。

完整代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // appBar: AppBar(
        //   title: new Text('MaterialApp示例'),
        // ),
        body: AppHomePage(),
      ),
      color: Colors.yellow,
      debugShowMaterialGrid: false, //显示网格
      debugShowCheckedModeBanner: false, //去掉右上角的debug
      title: 'Material Design', //标题
      theme: ThemeData(
        primaryColor: Colors.yellow[500], //设置应用的主要颜色为黄色
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("首页"),
        TextButton(
          onPressed: () async {
            var result = await Navigator.push(context,
                MaterialPageRoute(builder: (context) {
              return OnePage(
                title: '我是Flutter',
              );
            }));
            print(result);
          },
          child: Text("基本路由跳转"),
        )
      ],
    ));
  }
}

class OnePage extends StatelessWidget {
  // Declare a field that holds the Todo
  final String title;

  OnePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('基本路由跳转页面'),
        elevation: 0.0,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('基本路由跳转页面-传值内容：$title'),
            TextButton(
              onPressed: () {
                Navigator.pop(context, '我是返回值');
              },
              child: Text("返回"),
            )
          ],
        ),
      ),
    );
  }
}

二、命名路由

所谓“命名路由”（Named Route）即有名字的路由，我们可以先给路由起一个名字，然后就可以通过路由名字直接打开新的路由了，这为路由管理带来了一种直观、简单的方式。还记得前面的MaterialApp中的routes参数吗？它就是配置路由表的。

routes对象是一个Map。当使用Navigator.pushNamed来处理理由的时候，会在routes中查找路由名字，然后使用对应WidgetBuilder来构造一个带有页面切换动画MaterialPageRoute。使用routes是给MaterialApp组件初始化一个路由表，并且可以使用initialRoute设置一个初始化路由。

2.1、路由使用步骤

设置路由表

routes: {
'one_page': (BuildContext context) => OnePage(), //第一个页面
'two_page': (BuildContext context) => TwoPage(), //第二个页面
},

设置初始化路由
```
initialRoute: 'one_page',
```

路由跳转

Navigator.pushNamed(context, 'two_page');

完整代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // appBar: AppBar(
        //   title: new Text('MaterialApp示例'),
        // ),
        body: AppHomePage(),
      ),
      //注册路由
      routes: {
        "one_page": (context) => OnePage(
              title: "我是来自命名路由",
            ),
        "home": (context) => AppHomePage(),
      },
      initialRoute: 'home',
      color: Colors.yellow,
      debugShowMaterialGrid: false, //显示网格
      debugShowCheckedModeBanner: false, //去掉右上角的debug
      title: 'Material Design', //标题
      theme: ThemeData(
        primaryColor: Colors.yellow[500], //设置应用的主要颜色为黄色
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("首页"),
        TextButton(
          onPressed: () async {
            var result = await Navigator.push(context,
                MaterialPageRoute(builder: (context) {
              return OnePage(
                title: '我是Flutter',
              );
            }));
            print(result);
          },
          child: Text("基本路由跳转"),
        ),
        TextButton(
            onPressed: () {
              Navigator.pushNamed(context, "one_page");
            },
            child: Text("命名路由跳转"))
      ],
    ));
  }
}

class OnePage extends StatelessWidget {
  // Declare a field that holds the Todo
  final String title;

  OnePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('基本路由跳转页面'),
        elevation: 0.0,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('基本路由跳转页面-传值内容：$title'),
            TextButton(
              onPressed: () {
                Navigator.pop(context, '我是返回值');
              },
              child: Text("返回"),
            )
          ],
        ),
      ),
    );
  }
}

2.2、路由传递参数

在路由页通过RouteSetting对象获取路由参数

class OnePage extends StatelessWidget {
  //省略代码
  @override
  Widget build(BuildContext context) {
    var args = ModalRoute.of(context)!.settings.arguments;
    print(args);
    //省略代码
  }
}

在打开路由时传递参数

Navigator.of(context)
                  .pushNamed("one_page", arguments: "命名路由传的的参数");

相同类型文章

每日一句

——林肯

今日排行

VSCode插件 - 快速生成表格并格式化
快速生成表格
Electron打包错误“Error: Application entry file ..”解决方案
打包出现如下错误：Error: Application entry file "dist\electron\main.js" in the "D:\gui\demo2\build\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.
数轴上两点间的距离公式及中点公式
数轴上两点间的距离公式及中点公式
嗨！Tauri
Tauri 是一个框架，用于为所有主要桌面平台构建小巧、快速的二进制文件。开发人员可以集成任何可编译为 HTML、JS 和 CSS 的前端框架，以构建他们的用户界面。应用程序的后端是一个基于 Rust 的二进制文件，带有一个前端可以与之交互的 API。 Tauri 应用程序的用户界面目前在 macOS 和 Windows 上利用 tao 作为窗口处理库，在 Linux 上通过 Tauri 团队孵化和维护的 WRY 利用 WebKit、Windows 上的 WebView2 和 Linux 上的 WebKitGTK 创建一个统一的系统 webview（和其他好东西，如菜单和任务栏）接口。
定弦定角模型
定弦定角，顾名思义，弦是固定的，也就是弦的长度是不变的。定角的意思，是弦所对应的角度大小固定，也就是不变的意思。根据圆周角定理，我们知道圆周角等于圆心角的一半，那么这个圆周角的顶点不是固定的，它旋转的轨迹是圆或者圆弧。

点击排行

VSCode插件 - 快速生成表格并格式化
快速生成表格
Electron打包错误“Error: Application entry file ..”解决方案
打包出现如下错误：Error: Application entry file "dist\electron\main.js" in the "D:\gui\demo2\build\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.
Electron页面跳转、浏览器打开链接和打开新窗口
Electron页面跳转、浏览器打开链接和打开新窗口
Docker编译出现:temporary error (try again later)
Docker编译镜像出现：fetch http://dl-cdn.alpinelinux.org/alpine/v3.12/main/x86_64/APKINDEX.tar.gz ERROR: http://dl-cdn.alpinelinux.org/alpine/v3.12/main: temporary error (try again later) WARNING: Ignoring APKINDEX.2c4ac24e.tar.gz: No such file or directory问题
mac git用户名和密码修改
在Mac电脑中，如何对Git的用户名和密码进行修改呢？起初不懂Mac，所以整了很久，本文将记录如何对这个进行操作，以便后期使用。
Git保存和清除用户名、密码
在使用Git的过程中，不想每次都输入用户名和密码去拉取代码，所以就需要保存这些信息，那么既然有保存了，就必须有清除功能。