入门flutter四，路由（上）基础

这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战

快乐的路由

再见路由，灵魂都颤抖着发出了声音，那声音在说：

路由是是开发界的扛把子了属于是，没有前端可以干干净净的离开路由的床。

你说这，大过年的，来都来了，可不得把路由这趟泥水洗干净嘛？

你以为我在水字数说胡话？并不是，我是在铺垫来的，相信接触过路由的小伙伴都会比较清楚（刚接触前端没搞过路由的小伙伴也别叫紧张），路由说白了就是坐火车时候。

首先第一步买票，这一步是明确你要去哪里。

第二步进火车站，一个中转的地方。在进站时需要刷脸确保你是有这今天的行程票的（鉴权），并且要过安检看下你携带了什么（路由守卫），之后进候车厅等待乘车（路由跳转）。

第三步到站出站，检票出站看看还有什么需要为你服务的（路由后置守卫及传值接受）。

想不到我临时编的东西还这么形象，不愧是我啊。

ps: 因为路由很重要，入门级的知识来讲也是必知必会还有点麻烦的东西，所以分几个篇章来详细说说。

这篇文章是路由入门，所以比较简单，基础比较夯实的请点赞再走。

flutter路由基础

首先还是主函数咯。

import 'package:flutter/material.dart';
import 'package:learn/widgets/navigator.dart';

void main() => runApp(MyApp()); // 默认主函数

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginPage(), // 以登录页路口。
    );
  }
}

然后就是模拟一下完成登录之后进行带参跳转，以及对应也没携带参数返回。

为了方便理解，这里吧跳转后的页面MenuPage放在前面，直接从上到下阅读理解。

class MenuPage extends StatelessWidget {
  // 定义一个参数，是当前页面的标题。
  final String title;
  // 新增required this.title, title必传
  const MenuPage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        centerTitle: true,
      ),
      body: ElevatedButton(
        onPressed: () {
          // 返回值可以是任意类型，包括不限于是字符串、对象
          Navigator.of(context).pop("返回值");
        },
        child: Text('返回'),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("登录"),
        centerTitle: true,
      ),
      body: ElevatedButton(
        // 异步操作时，添加async关键字
        onPressed: () async {
          // 添加await关键字，转为同步方法等待返回值
          var result = await Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) {
                return MenuPage(
                  title: "菜单", // 跳转到MenuPage时，传值
                );
              },
              maintainState: false, // 路由用不上了之后自动释放资源
              fullscreenDialog: false, // 是否全屏，ios中进入动画不一样 true = down to up
            ),
          );
          print(result);
        },
        child: Text("登录"),
      ),
    );
  }
}

如上，可以看到一个简单的路由，两个页面之间你来我往，纸短情长。

总结

想不到吧，这就结束了？ 是的，入门级的路由就是这么简单，可以带参的路由跳转，如果是网页开发的话，就是放在网页地址或者存本地缓存，而flutter中可以通过函数传参来完成页面的参数传递。

ヾ(◍°∇°◍)ﾉﾞ，简单就对了，不整那些虚的。