Flutter修仙传第二章：路由详解

最新推荐文章于 2023-04-12 15:55:27 发布

小圣贤君

最新推荐文章于 2023-04-12 15:55:27 发布

阅读量2.2k

点赞数 7

本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/105389566

版权

兄弟们，咱们又见面了。

在上一章中，咱们入门学习了Flutter神功，会了些皮毛，知道了输入框，单选复选等这些基础组件的使用，小生并没有讲解按钮这种基础组件的使用，像这种easy的不能再easy的组件知识点，如果你看了还不会，那么请照一下镜子，告诉自己：放弃编程吧。

万丈红尘财路多，何必非做一码农？

咱们已经学会了Flutter的一些皮毛，在一个页面里，咱们能够整个输入框，整个按钮了，咱们很高兴，就想着大展身手，多整几个页面，这时，懵了，我怎么构建其他页面？我怎么打开其他页面？

这时候，就用到了路由的概念。

什么是路由？

路由(Route)在移动开发中通常指页面（Page），这跟web开发中单页应用的Route概念意义是相同的，Route在Android中通常指一个Activity，在iOS中指一个ViewController。

什么是路由管理？

所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter中的路由管理和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

兄弟们对上面的概念可能有点模糊，别担心，看完下面的内容就明白了。

咱们先创建三个页面，page1.dart，page2.dart，page3.dart。
每个页面的基本结构如下：

import 'package:flutter/material.dart';

class PageOne extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold( // 一个页面骨架容器类型组件，在这里可以设置导航栏，主要页面等内容
      appBar: AppBar(
        title: Text("第一个页面"),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
              child: Text("跳转第二页"),
              onPressed: (){
   
                // 这里执行按钮的点击事件，如跳转页面，获取数据等操作
              }
          )
        ],
      ),
    );
  }
}

Scaffold组件，兄弟们可以认为就是一个页面骨架组件，创建页面，就用这个组件就行，详细内容，小生后续章节讲解。

好，页面咱们已经创建了，下一步就是要让这个页面显示出来。

兄弟们别忘了一个概念：组件。

按钮是组件，输入框是组件，图片是组件，你创建的这个.dart文件也可以看成组件。并不是官方提供的东西才是组件，你创建的.dart文件，可以是页面，也可以是按钮，输入框等，或者自定义的内容，都可以看成组件。

既然是组件，那就可以引入。

兄弟们在你们的main.dart里面将page1.dart引入，不会引入？开什么玩笑，你敲一个import就会有提示，无论是…/还是./或者还是直接lib/这种，只要你能引入进来不报错就行，引入个两三遍你就心领神会了。

引入后，在页面中添加一个按钮，在按钮的onPressed事件中添加以下操作：

//导航到新路由   
 Navigator.push( context,
  MaterialPageRoute(builder: (context) {
   
     return PageOne(); // 你每个页面的类名是什么，这里就是什么
  }));

兄弟们又懵了，这又是Navigator又是MaterialPageRoute，这都是什么玩意？就这么写就行吗？
对，就这么写就行，不信你点点按钮，啪嚓，直接跳转到了page1.dart这个页面了。

先来说下MaterialPageRoute这个东西，通俗一点讲，这玩意提供了显示路由页面的功能，比如说，你怎么显示页面？用什么动画效果显示页面？显示哪一个页面？都可以用这玩意来操作，如果兄弟们觉得小生说的不够官方，不够学术，你就搜一搜官方文档，这里不多做解释。

啥是Navigator？

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

有朋友又迷惑了，什么是栈？学Flutter怎么还整上客栈了？

这个栈啊，兄弟们可以认为是一个盒子，打个比方，你偷偷给你女朋友写情书，写完一张往这个盒子里放一张，你看到的永远都是最上面的一张，也就是你当前看到的页面，你往这个盒子里一张张放情书的过程就是入栈push，你一张张拿出来的过程就是出栈pop。

Navigator就是Flutter为咱们提供的控制页面打开关闭的一个工具，有朋友恍然大悟ÿ

最低0.47元/天解锁文章