flutter之从零开始搭建（二）之 Navigator路由-阿里云开发者社区

flutter之从零开始搭建（二）之 Navigator路由

2022-09-26 177

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： flutter之从零开始搭建（二）之 Navigator路由

今天我们来讲讲利用Navigator来跳转页面的功能，承接上一篇flutter之从零开始搭建（一）之 BottomNavigationBar继续讲。

页面跳转是我们在入门学习的必备知识，在flutter中，路由跳转是由Navigator来操作的。

Navigator的跳转有两种，一种是显示跳转，需要我们在MaterialPageRoute中指定widget

Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
      //指定跳转的页面
      return new Demo1();
    },));
复制代码

另一种是隐身跳转，这种跳转需要先定义，后使用，跳转方式就像Arouter一样的路径方式，定义部分需要在MaterialApp下定义routes，routes就跟一个Map<path,Page>集合一样，定义好了path对应的page，那么下次跳转，我们就可以针对path去跳转了

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"))),
      ),
      //定义路由
      routes: <String,WidgetBuilder>{
        "/demo1":(BuildContext context)=>new Demo1(),
      },
    );
复制代码

跳转使用

Navigator.of(context).pushNamed("/demo1");
复制代码

知道路由如何跳转了，那么，我们开始实战吧

实战

我们看到，路由的跳转都带着一个context参数，这其中有无数的坑需要自己去理解，接下来我会展示出来。

还是承接上一篇博文flutter之从零开始搭建（一）之 BottomNavigationBar，我们先看下MyPage页面，先给出如下代码

import 'package:flutter/material.dart';
import 'package:codelang/widget/Demo1.dart';
class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: new PageWidget(),
      routes: <String,WidgetBuilder>{
        "/demo1":(BuildContext context)=>new Demo1(),
      },
    );
  }
}
class PageWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new PageState();
  }
}
class PageState extends State<PageWidget> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
       body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"),),),
    );
  }
  _pushPage(){
   // Navigator.of(context).pushNamed("/demo1");
    Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
      return new Demo1();
    },));
  }
}
复制代码

大家整体看一下代码，其实没什么错误的地方，看起来一切都很正常，然后我们来看下效果图

what fuck!!! 跳转的页面怎么没有覆盖全屏，所以，这种方式肯定是不可取的。

我们先停下来想想，我们当前页面PageState是在PageWidget布局上面，

PageWidget还有一个上层布局叫MyPage，我们是不是可以理解为，Navigator.of(context)的这个context指向的是上层MyPage布局的context，导致了页面路由跳转是在MyPage页面进行。

那么有什么解决办法呢？既然是context原因，那么，我们必须得拿到MyPage的上一层context，我们再想想，MyPage相当于一个fragment，是由MainPage页面组成的，我们只需要拿将MainPage页面的context传递给MyPage不就行了吗？接下来开干试试。

打开MainPage

给MyPage的构造方法传递MainPage的context

_bodys = [
      new HomePage(),
      new ShopPage(),
      new MsgPage(),
      new MyPage(context)
    ];
复制代码

打开MyPage

MyPage拿到MainPage的parentContext，然后将parentContext传递给PageWidget，PageState可以通过widget.X的形式，可以拿到PageWidget的变量

import 'package:flutter/material.dart';
import 'package:codelang/widget/Demo1.dart';
class MyPage extends StatelessWidget {
  var parentContext;
  MyPage(this.parentContext);
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: new PageWidget(parentContext),
      routes: <String,WidgetBuilder>{
        "/demo1":(BuildContext context)=>new Demo1(),
      },
    );
  }
}
class PageWidget extends StatefulWidget {
  var parentContext;
  PageWidget(this.parentContext);
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new PageState();
  }
}
class PageState extends State<PageWidget> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
       body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"),),),
    );
  }
  _pushPage(){
//    Navigator.of(widget.parentContext).pushNamed("/demo1");
    Navigator.of(widget.parentContext).push(new MaterialPageRoute(builder: (context) {
      return new Demo1();
    },));
  }
}
复制代码

看下效果图

嗯，很完美的解决，大家有没有看到我_pushPage方法中注释了的pushNamed方式的跳转，大家猜猜，用这种方式会不会出错？5秒钟的思考哦.

倒计时5s
倒计时4s
倒计时3s
倒计时2s
倒计时1s

OK，来揭晓答案，肯定是不行的，我们知道，routes的定义是在MyPage中的，而我们饿路由跳转拿到的parentContext是MainPage的，所以，会报找不到这个路由的错误，如何解决呢？我相信到这大家应该都清楚了，那就是在MainPage中去定义这个routes，具体可以看如下

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        debugShowCheckedModeBanner: false,
        routes: <String, WidgetBuilder>{
          "/demo1": (BuildContext context) => new Demo1(),
        },
        home: new MainPageWidget());
  }
}
复制代码

这样跳转就可以了，效果图我就不贴出来了，跟上面一样。

你以为就这样结束了？哈哈，早着呢，在写这篇博文的时候，我又发现了一个好玩的地方，为了区分，我在HomePage页面去写这个例子，代码不多，大家看看

HomePage

import 'package:flutter/material.dart';
import 'package:codelang/widget/Demo1.dart';
class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new HomeState();
  }
}
class HomeState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"))),
      ),
    );
  }
  _pushPage() {
//    Navigator.of(context).pushNamed("/demo1");
    Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
      return new Demo1();
    },));
  }
}
复制代码

在这个路由跳转中，我用了context来跳转，大家再猜猜，这种方式可以嘛？5秒钟的思考时间

倒计时5s
倒计时4s
倒计时3s
倒计时2s
倒计时1s

答案揭晓，是可以的哦，为什么这样又可以了呢？

HomePage与MyPage的区别在于定义这个widget时，MyPage最外套的一层是StatelessWidget，而HomePage最外套的一层是StatefulWidget，StatelessWidget是一个无状态的widget，难道是他阻隔了context的传递？具体的我也不清楚，只能去猜。

大家再猜猜还是那段注释了的pushNamed的代码，可不可以跳转呢？哈哈，当然是可以的，因为我们在前面的时候，就已经在mainPage中定义了routes

好了，路由这篇说完了，唯一坑就是context的问题，看了这一篇，相信很多人都理解了Navigator如何跳转，下一篇再见吧

flutter之从零开始搭建（二）之 Navigator路由

实战

热门文章

最新文章

相关课程

相关电子书

相关实验场景