Flutter 局部路由实现详解

 更新时间:2019年06月11日 11:32:16   作者:zhongmeizhi  
这篇文章主要介绍了Flutter 局部路由实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Flutter是借鉴React的开发思想实现的,在子组件的插槽上,React有this.props.children,Vue有<slot></slot>。

当然Flutter也有类似的Widget,那就是Navigator,不过是以router的形式实现(像<router-view></router-view>???)。

Navigator的使用无非3个属性

  • initialRoute: 初始路由
  • onGenerateRoute: 匹配路由
  • onUnknownRoute: 404

在实现层面

首先:Navigator的高度为infinity。如果直接父级非最上级也是infinity会产生异常,例如,Scaffold -> Column -> Navigator。所以:Navigator需要附件限制高度,例如:Scaffold -> Column -> Container(height: 300) -> Navigator

然后:在onGenerateRoute属性中,使用第一个BuildContext参数,能够在MaterialApp未设置route的情况下使用Navigator.pushNamed(nContext, '/efg');跳到对应的子路由中。

最后:Navigator执行寻找路由顺序是 initialRoute -> onGenerateRoute -> onUnknownRoute,这个和React的Route是类似的。

最后附上源码

import 'package:flutter/material.dart';

class NavigatorPage extends StatefulWidget {
 @override
 _NavigatorPageState createState() => _NavigatorPageState();
}

class _NavigatorPageState extends State<NavigatorPage> {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text('Navigator'),
   ),
   body: Column(
    children: <Widget>[
     Text('Navigator的高度为infinity'),
     Text('如果直接父级非最上级也是infinity会产生异常'),
     Container(
      height: 333,
      color: Colors.amber.withAlpha(111),
      child: Navigator( // Navigator
       initialRoute: '/abc',
       onGenerateRoute: (val) {
        RoutePageBuilder builder;
        switch (val.name) {
         case '/abc':
          builder = (BuildContext nContext, Animation<double> animation, Animation<double> secondaryAnimation) => Column(
           // 并没有在 MaterialApp 中设定 /efg 路由
           // 因为Navigator的特性 使用nContext 可以跳转 /efg
           children: <Widget>[
            Text('呵呵呵'),
            RaisedButton(
             child: Text('去 /efg'),
             onPressed: () {
              Navigator.pushNamed(nContext, '/efg');
             },
            )
           ],
          );
         break;
         case '/efg':
          builder = (BuildContext nContext, Animation<double> animation, Animation<double> secondaryAnimation) => Row(
           children: <Widget>[
            RaisedButton(
             child: Text('去 /hhh'),
             onPressed: () {
              Navigator.pushNamed(nContext, '/hhh');
             },
            )
           ],
          );
         break;
         default:
          builder = (BuildContext nContext, Animation<double> animation, Animation<double> secondaryAnimation) => Center(
           child: RaisedButton(
            child: Text('去 /abc'),
            onPressed: () {
             Navigator.pushNamed(nContext, '/abc');
            },
           )
          );
        }
        return PageRouteBuilder(
         pageBuilder: builder,
         // transitionDuration: const Duration(milliseconds: 0),
        );
       },
       onUnknownRoute: (val) {
        print(val);
       },
       observers: <NavigatorObserver>[]
      ),
     ),
     Text('Navigator执行寻找路由顺序'),
     Text('initialRoute'),
     Text('onGenerateRoute'),
     Text('onUnknownRoute'),
    ],
   ),
  );
 }
}

项目地址: https://github.com/zhongmeizhi/fultter-example-app

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android使用WebView播放flash的方法

    Android使用WebView播放flash的方法

    这篇文章主要介绍了Android使用WebView播放flash及判断是否安装flash插件的方法,以实例形式详细讲述了从布局、逻辑判断到功能最终实现播放Flash的方法,是Android程序设计中比较典型的应用,需要的朋友可以参考下
    2014-11-11
  • Android隐藏标题栏及解决启动闪过标题的实例详解

    Android隐藏标题栏及解决启动闪过标题的实例详解

    这篇文章主要介绍了Android隐藏标题栏及解决启动闪过标题的实例详解的相关资料,这里提供两种方法帮助大家解决这种问题,需要的朋友可以参考下
    2017-09-09
  • Android开发之微信底部菜单栏实现的几种方法汇总

    Android开发之微信底部菜单栏实现的几种方法汇总

    这篇文章主要介绍了Android开发之微信底部菜单栏实现的几种方法,下面小编把每种方法通过实例逐一给大家介绍,需要的朋友可以参考下
    2016-09-09
  • Android onKeyDown监听返回键无效的解决办法

    Android onKeyDown监听返回键无效的解决办法

    这篇文章主要介绍了 Android onKeyDown监听返回键无效的解决办法的相关资料,需要的朋友可以参考下
    2017-06-06
  • Android模仿用户设置密码实例

    Android模仿用户设置密码实例

    首先有2个对话框,没有设置过密码,需要设置dialog_set_password.xml,用户设置过密码,不需要设置,直接输入密码dialog_input_password.xml,具体实现代码,大家参考下本文
    2017-03-03
  • Jetpack Compose实现动画效果的方法详解

    Jetpack Compose实现动画效果的方法详解

    compose为支持动画提供了大量的 api,通过这些 api 我们可以轻松实现动画效果。本文将为大家介绍利用compose实现的多种动画效果的示例代码,需要的可以参考一下
    2022-02-02
  • Android SQLite操作之大数据处理与同时读写方法

    Android SQLite操作之大数据处理与同时读写方法

    这篇文章主要介绍了Android SQLite操作之大数据处理与同时读写方法,实例分析了Android操作SQLite时基于事务的数据缓存与批量插入技巧,以及同时读写的相关实现方法与注意事项,需要的朋友可以参考下
    2016-07-07
  • AndroidStudio图片压缩工具ImgCompressPlugin使用实例

    AndroidStudio图片压缩工具ImgCompressPlugin使用实例

    这篇文章主要为大家介绍了AndroidStudio图片压缩工具ImgCompressPlugin使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Android Studio 2022.1.1创建项目的Gradle配置问题

    Android Studio 2022.1.1创建项目的Gradle配置问题

    这篇文章主要介绍了Android Studio 2022.1.1创建项目的Gradle配置问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 谈谈Android6.0运行时的权限处理

    谈谈Android6.0运行时的权限处理

    之前有人在 Android 6.0 的机型上运行了DragGridView结果出异常奔溃了。想必问题的原因大家都知道,是Android 6.0新引入了在运行时权限申请(Runtime Permissions)的功能。那么这所谓的运行时申请权限究竟是怎么一回事呢,下面跟着小编一起来看看吧!
    2016-08-08

最新评论