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小工具自定义view课表

    Android小工具自定义view课表

    这篇文章主要为大家详细介绍了Android小工具自定义view课表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Android快速实现触摸移动的悬浮窗

    Android快速实现触摸移动的悬浮窗

    这篇文章主要为大家详细介绍了Android快速实现触摸移动的悬浮窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Android触摸事件传递机制初识

    Android触摸事件传递机制初识

    这篇文章主要为大家详细介绍了Android触摸事件的传递机制,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Android加载Gif动画实现代码

    Android加载Gif动画实现代码

    这篇文章主要为大家详细介绍了Android加载Gif动画实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Android WebView使用的技巧与一些坑

    Android WebView使用的技巧与一些坑

    这篇文章主要为大家详细介绍了Android WebView使用的技巧与一些坑,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • Android中的JSON详细总结

    Android中的JSON详细总结

    一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性。业内主流技术为其提供了完整的解决方案(有点类似于正则表达式,获得了当今大部分语言的支持),从而可以在不同平台间进行数据交换
    2013-01-01
  • Android应用中制作选中后图标变大浮动效果的代码分享

    Android应用中制作选中后图标变大浮动效果的代码分享

    这篇文章主要介绍了Android应用中制作选中后图标变大浮动效果的代码分享,这里作者举了一个体育赛事app的例子,需要的朋友可以参考下
    2016-02-02
  • android surfaceView实现播放视频功能

    android surfaceView实现播放视频功能

    这篇文章主要为大家详细介绍了android surfaceView实现播放视频功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Android实现录音监听动画的示例代码

    Android实现录音监听动画的示例代码

    在很多app种内置了语音助手,也存在各种动画,这篇文章主要为大家详细介绍了Android实现录音监听动画的示例代码,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • Android编程中的四大基本组件与生命周期详解

    Android编程中的四大基本组件与生命周期详解

    这篇文章主要介绍了Android编程中的四大基本组件与生命周期,结合实例形式较为详细的分析了Android四大组件及生命周期的相关概念与使用技巧,需要的朋友可以参考下
    2015-12-12

最新评论