Flutter进阶—路由和导航

最新推荐文章于 2024-09-12 14:00:58 发布
最新推荐文章于 2024-09-12 14:00:58 发布
阅读量1.8w 收藏 12
点赞数 7
分类专栏： dart flutter Flutter教程 文章标签： flutter dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hekaiyou/article/details/72853738
版权
dart 同时被 3 个专栏收录
127 篇文章 13 订阅
订阅专栏
flutter
119 篇文章 9 订阅
订阅专栏
Flutter教程
82 篇文章 1417 订阅
订阅专栏

大部分应用程序都有多个屏幕或页面，并希望用户能从当前屏幕平滑过渡到另一个屏幕，Flutter的路由和导航功能可以帮助我们管理应用程序中的用户界面之间的命名和过渡。

管理多个用户界面有两个核心概念和类：路由（Route）和导航器（Navigator），路由（Route）是应用程序的“屏幕”或“页面”的抽象，导航器（Navigator）是管理路由的控件。导航器（Navigator）可以推送（push）和弹出（pop）路由来帮助用户从当前屏幕移动到另一个屏幕。

使用导航器（Navigator）

移动应用通常通过称为“屏幕”或“页面”的全屏元素显示其内容，在Flutter中，这些元素称为路由，它们由导航器（Navigator）控件管理。导航器管理一组路由（Route）对象，并提供了管理堆栈的方法，例如Navigator.push和Navigator.pop。

Future push(
  BuildContext context,
  Route route
)
// 将给定的路由添加到最靠近给定上下文的导航器的历史记录，并过渡到它
bool pop(
  BuildContext context, [
  result
])
// 从导航器中弹出最靠近给定上下文的路由

显示屏幕路由

虽然您可以直接创建导航器，但最常见的是使用由WidgetsApp或MaterialApp控件创建的导航器，您可以使用Navigator.of引用该导航器。

NavigatorState of(
  BuildContext context
)
// 最接近该类的实例包含给定上下文的状态

一个MaterialApp是最简单的设置方式，MaterialApp的home成为导航器堆栈底部的路由。要在堆栈上推送（push）一个新路由，您可以创建一个具有构建器功能的MaterialPageRoute实例，它可以创建您想要显示在屏幕上的任何内容。

MaterialPageRoute是一种模态路由，可以通过平台自适应过渡来切换屏幕。对于Android，页面推送过渡时向上滑动页面，并将其淡入淡出，弹出过渡则向下滑动页面，该过渡适应平台。在iOS上，页面从右侧滑入，反向弹出，当另一个页面进入以覆盖时，该页面也会在视差中向左移动。

默认情况下，当模态路由替换为另一路由时，上一个路由将保留在内存中，要在没有必要时释放所有资源，可以将maintainState设置为false。

现在我们新建一个项目myapp，然后用下面代码替换main.dart文件的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: '应用程序首页'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void _openNewPage() {
    setState(() {
      Navigator.of(context).push(new MaterialPageRoute<Null>(
        builder: (BuildContext context) {
          return new Scaffold(
            appBar: new AppBar(
              title: new Text('新的页面')
            ),
            body: new Center(
              child: new Text(
                '点击浮动按钮返回首页',
              ),
            ),
            floatingActionButton: new FloatingActionButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: new Icon(Icons.replay),
            ),
          );
        },
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Text(
          '点击浮动按钮打开新页面',
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _openNewPage,
        child: new Icon(Icons.open_in_new),
      ),
    );
  }
}

通常没有必要提供一个使用Scaffold在路由中弹出导航器的控件，因为Scaffold会自动在其AppBar中添加一个后退按钮。按下后退按钮会导致Navigator.pop被调用，在Android上按系统后退按钮也是一样的。

使用命名导航器路由

移动应用程序经常管理大量路由，通常可以通过名称来引用它们。路由名称按惯例使用类似路径的结构，例如“/a/b/c”，应用程序的主页路由默认为“/”。

可以使用Map<String, WidgetBuilder>创建MaterialApp，该Map映射从路由的名称到将创建它的构建器，MaterialApp使用此映射为导航器的onGenerateRoute回调创建一个值。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(title: '应用程序首页'),
      routes: <String, WidgetBuilder> {
        '/a': (BuildContext context) => new MyPage(title: 'A 页面'),
        '/b': (BuildContext context) => new MyPage(title: 'B 页面'),
        '/c': (BuildContext context) => new MyPage(title: 'C 页面')
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Row(
        children: <Widget>[
          new RaisedButton(
            child: new Text('A按钮'),
            onPressed: () { Navigator.of(context).pushNamed('/a'); },
          ),
          new RaisedButton(
            child: new Text('B按钮'),
            onPressed: () { Navigator.of(context).pushNamed('/b'); },
          ),
          new RaisedButton(
            child: new Text('C按钮'),
            onPressed: () { Navigator.of(context).pushNamed('/c'); },
          )
        ]
      )
    );
  }
}

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

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title)
      ),
    );
  }
}

Map<String, WidgetBuilder> routes是应用程序的顶级路由表,当使用Navigator.pushNamed推送命名路由时，将在此映射中查找路由名称。如果名称存在，则相关联的WidgetBuilder将用于构造一个MaterialPageRoute，该新的路由执行适当的过渡。

如果应用程序只有一个页面，那么可以使用home指定它，如果指定了home，那么在此映射中为Navigator.defaultRouteName提供路由是一个错误。如果请求没有在此表中指定的路由（或通过home），则会调用onGenerateRoute回调来构建页面。

路由可以返回一个值

当路由被推送，用于获取用户的输入时，可以通过pop方法的result参数返回用户的输入值。推送路由的方法返回Future类型，Future将在路由弹出时解析，而Future的值是pop方法的result参数。

例如，如果我们要求用户按“确定”确认操作，我们可以等待Navigator.push的结果：

import 'package:flutter/material.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyHomePage(title: '应用程序首页'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _result = false;

  Future<Null> _openNewPage() async {
    bool value = await Navigator.of(context).push(new MaterialPageRoute<bool>(
      builder: (BuildContext context) {
        return new Center(
          child: new GestureDetector(
            child: new Text("确定"),
            onTap: () { Navigator.of(context).pop(true); },
          ),
        );
      }
    ));

    setState(() {
      _result = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text(widget.title),
        ),
        body: new Center(
            child: new Text(
                '用户当前选择为 $_result',
            ),
        ),
        floatingActionButton: new FloatingActionButton(
            onPressed: _openNewPage,
            child: new Icon(Icons.open_in_new),
        ),
    );
  }
}

如果用户按“确定”，则值将为真。如果用户退出路由，例如通过按Scaffold的后退按钮，该值将为null。当使用路由return值时，路由的type参数必须与pop的结果类型相匹配。这就是为什么我们使用MaterialPageRoute<bool>而不是MaterialPageRoute<Null>的原因。

弹出路由

路由不一定需要掩盖整个屏幕，PopupRoutes覆盖屏幕，屏幕颜色只能部分不透明，以允许当前屏幕显示。弹出路由是模态的，因为它们阻止了下面的控件的输入。

框架有创建和显示弹出路由的功能，例如：showDialog、showMenu和showModalBottomSheet。这些功能如上所述返回其推送的路由的Future，调用时可以等待返回的值在路由弹出时采取行动，或者发现路由的值。

还有一些创建弹出路由的控件，如PopupMenuButton和DropdownButton。这些控件创建PopupRoute的内部子类，并使用路由的push和pop方法来显示和关闭它们。

import 'package:flutter/material.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyHomePage(title: '应用程序首页'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _result = false;

  Future<Null> _openNewPage() async {
    bool value = await showDialog(
      context: context,
      barrierDismissible: true,
      child: new Center(
        child: new GestureDetector(
          child: new Text("确定"),
          onTap: () { Navigator.of(context).pop(true); },
        ),
      )
    );

    setState(() {
      _result = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text(widget.title),
        ),
        body: new Center(
            child: new Text(
                '用户当前选择为 $_result',
            ),
        ),
        floatingActionButton: new FloatingActionButton(
            onPressed: _openNewPage,
            child: new Icon(Icons.open_in_new),
        ),
    );
  }
}

定制路由

您可以创建自己的控件库路由类，比如PopupRoute、ModalRoute或PageRoute的子类，以控制用于显示路由，包括路由模态屏障的颜色和行为以及路由其他方面的动画转换。

PageRouteBuilder类可以根据回调来定义自定义路由，下面是一个示例，当路由出现或消失时，它会旋转和淡化其子对象。此路由不会遮蔽整个屏幕，因为它指定了opaque: false，就像弹出路由一样。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyHomePage(title: '应用程序首页'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void _openNewPage() {
    Navigator.of(context).push(new PageRouteBuilder(
      opaque: false,
      pageBuilder: (BuildContext context, _, __) {
        return new Center(child: new Text('定制页面路由'));
      },
      transitionsBuilder: (_, Animation<double> animation, __, Widget child) {
        return new FadeTransition(
          opacity: animation,
          child: new RotationTransition(
            turns: new Tween<double>(begin: 0.5, end: 1.0).animate(animation),
            child: child,
          ),
        );
      }
    ));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text(widget.title),
        ),
        body: new Center(
            child: new Text(
                '点击浮动按钮打开定制页面',
            ),
        ),
        floatingActionButton: new FloatingActionButton(
            onPressed: _openNewPage,
            child: new Icon(Icons.open_in_new),
        ),
    );
  }
}

页面路由分为两部分：“页面”和“过渡”。页面成为传递给buildTransitions方法的子代的后代，通常，页面仅构建一次，因为它不依赖于其动画参数，在此示例中为_和__。过渡建立在每个帧的持续时间。

何小有
关注
专栏目录
Flutter进阶篇（6）-- PageStorageKey、PageStorageBucket和PageStorage使用详解
lzw的专栏
07-10 1130
声明：本文是作者AWeiLoveAndroid原创，版权归作者AWeiLoveAndroid所有，侵权必究。如若转发，请注明作者和来源地址！未经授权，严禁私自转载！ 如果你想从一个页面进入另一个页面，返回时还是保留着跳转前的最后的状态，也许你第一个想的是用Key去实现，但是那么有点麻烦，很多人的都不知道如何下手。今天我查找源码，发现了一个PageStorage这个类，它主要是用于存储状态...
ALI Flutter进阶笔记，移动手机app开发
m0_66144910的博客
01-18 217
阿里巴巴集团内也有越来越多的业务和团队开始尝试 Flutter 技术栈，从闲鱼的一支独秀引领潮流，到如今淘宝特价版、优酷、飞猪等BU业务相继入局，Flutter的业务应用在集团内也已经逐渐形成趋势。 有幸从一位朋友那里得到阿里内部出品强推的“Flutter进阶笔记”，秉承好东西的当然要共享的原则，今天就来秀一把，试试这“Flutter进阶笔记”是否也能让你事半功倍！ 第一章 为什么Flutter是跨平台开发的终极之选 跨平台开发是当下最受欢迎、应用最广泛的框架之一。能实现跨平台开发的框架也五花八门，让人
Flutter路由动画
JUSTIN的博客
10-03 838
在常规app开发中，肯定避免不了自定义路由动画，那么我们怎么给flutter定义路由动画呢。相信大家在谷歌搜索会出现很多定义路由动画的，但是按他们实现的动画，大部分是有一定缺陷的，比如这种路由动画！！！！！！点我。
Flutter 控件之 Routes 和 Navigator. [PopupRoute]
weixin_30332705的博客
03-22 542
一个 App 通常会有多个界面，每个界面实现不同的功能，并在多个界面之间跳转。在 Flutter 中多个界面的跳转是通过 Navigator 来实现的。 在 Flutter 中定义了一个OverlayWidget 用来管理多个界面，Overlay 里面使用Stack来显示当前的界面。通常不直接和 Overlay 打交道，而是使用WidgetsApp或者MaterialApp中的...
Flutter-底部选择弹窗(showModalBottomSheet)
最新发布
nonagontech的博客
09-12 1039
现在有个需求，需要用底部弹窗来添加定时的重复。在这里使用原生的showModalBottomSheet来实现。
Flutter 使用 PopupRoute 实现一个高度自定义的Popup组件
m0_63548381的博客
05-17 1068
Positioned widget 内部又包含一个GestureDetector，它的 child 是传入的child参数，当用户点击child时，会调用MyPopup.closePop方法关闭弹出层。Stack中包含两个子组件，一个是用户传入的child，另一个是小箭头，箭头的方向和颜色由direction和color参数决定。此组件接受三个参数：child（弹出层的内容）、right（弹出层距离屏幕右侧的距离）和top（弹出层距离屏幕顶部的距离）。这个组件需要自己手动控制箭头和矩形框的位置。
Flutter路由监听
Care iOS技术团队
12-02 1399
点击返回按钮的时候我用WillPopScope这个widget来监听的。 后来，为了更细的监听路由，我发现了flutter自带的监听器，直接上代码，节约时间 首先创建一个全局变量，不在任何类里面 final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>(); 然后告诉flutter：喂，这是观察者，你路由的时候给他说一下！ 在main.dart中加入 Widget build(BuildConte
flutter入门之使用PopupRoute自定义实现PopupWindow功能
热门推荐
不忘初心
02-25 1万+
    【原创不易，转载请注明出处：https://blog.csdn.net/email_jade/article/details/87922051】     本文起因是由于一个弹窗，要实现一个能够通过点击显示隐藏的功能，效果如下：     第一选择是采用原生的PopupMenuItem，但是本应用的需求比较特殊，弹出的item自带背景图片，并且图片上面附件了一个Text的文本，item...
ALI Flutter进阶笔记
2401_84558442的博客
04-28 825
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。当然我也为你们整理好了百度、阿里、腾讯、字节跳动等等互联网超级大厂的历年面试真题集锦。这也是我这些年来养成的习惯，一定要学会把好的东西，归纳整理，然后系统的消化吸收，这样才能极大的提高学习效率和成长进阶。碎片、零散化的东西，我觉得最没有价值的。就好比你给我一张扑克牌，我只会觉得它是一张废纸，但如果你给我一副扑克牌，它便有了它的价值。
ALI Flutter进阶笔记，太赞了
m0_66144992的博客
01-31 270
VS Code: 右键单击并选择Format Document. Terminal: 运行flutter format . 1.替换 lib/main.dart. 删除lib / main.dart中的所有代码，然后替换为下面的代码，它将在屏幕的中心显示“Hello World”. import’package:flutter/material.dart’; voidmain()=>runApp(newMyApp()); classMyAppextendsStatelessWidget{ @overr
阿里大神最佳总结Flutter进阶学习笔记，技术详细介绍
m0_57081562的博客
04-20 311
开头 很多人工作了十年，但只是用一年的工作经验做了十年而已。 高级工程师一直是市场所需要的，然而很多初级工程师在进阶高级工程师的过程中一直是一个瓶颈。 移动研发在最近两年可以说越来越趋于稳定，因为越来越多人开始学习Android开发，造成市场参差不齐。正所谓入门容易成长很难，对未来比较迷茫，不知道自己技能该怎么提升，并且对于初级中级高级需要怎么进行成才，很多人都比较迷惑。 做了6年Android开发，你会的还只有初级工程师的技术吗？掌握了高级工程师的技术了吗？ JetPack里的组件 上图就是JetPac
Flutter路由的跳转、动画和传参详解（最简单）
08-26
主要给大家介绍了关于Flutter路由的跳转、动画和传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
flutter Gps 获取经度纬度 当前所在地址-附件资源
03-02
flutter Gps 获取经度纬度 当前所在地址-附件资源
适用于Android和iOS的Flutter地理位置插件.zip
09-24
适用于Android和iOS的Flutter地理位置插件。.zip,适用于android和ios的flutter地理定位插件。
flutter-geolocator,android和ios flutter地理定位插件.zip
09-24
一个flutter地理定位插件，它提供了对特定于平台的定位服务的简单访问（fusedlocationproviderclient，或者如果不可用，在android上的locationmanager和ios上的cllocationmanager）。
Flutter路由器管理
CJshaonian的博客
10-24 268
Flutter路由器管理 在 Flutter 中，页面之间的跳转是通过 Route 和 Navigator 来管理的： Route 是页面的抽象，主要负责创建对应的界面，接收参数，响应 Navigator 打开和关闭； 而 Navigator 则会维护一个路由栈管理 Route，Route 打开即入栈，Route 关闭即出栈，还可以直接替换栈内的某一个 Route。 而根据是否需要提前注册页面标识符，Flutter 中的路由管理可以分为两种方式： 基本路由。无需提前注册，在页面切换时需要自己构造页面实
Flutter 之 自定义路由切换动画
Dream It Possible
11-05 1667
无论是MaterialPageRoute、CupertinoPageRoute，还是PageRouteBuilder，它们都继承自PageRoute类，而PageRouteBuilder其实只是PageRoute的一个包装，我们可以直接继承PageRoute类来实现自定义路由。@override@override@override@override@override}@override}}使用MSFadeRoute},),);完整代码@override),
flutter 使用PopupRoute构建popupWindow弹窗并 动态刷新弹窗UI
zys_5566的博客
01-07 5987
popupRoute 弹窗 刷新
推荐一个引人注目的Flutter路由库——Fluro
gitblog_00020的博客
05-11 476
推荐一个引人注目的Flutter路由库——Fluro fluroFluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.项目地址:https://gitcode.com/gh_mirrors/...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

何小有

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值