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 Zipalign工具优化Android APK应用

    Android Zipalign工具优化Android APK应用

    本文主要介绍Android Zipalign工具优化Android APK应用,这里整理了相关资料及简单优化实例,有需要的小伙伴可以参考下
    2016-09-09
  • Android中Json数据读取与创建的方法

    Android中Json数据读取与创建的方法

    android 读取json数据,下面小编给大家整理有关Android中Json数据读取与创建的方法,需要的朋友可以参考下
    2015-08-08
  • 解决Error:All flavors must now belong to a named flavor dimension. Learn more at https://d.android.com

    解决Error:All flavors must now belong to a named flavor dimens

    这篇文章主要介绍了解决Error:All flavors must now belong to a named flavor dimension. Learn more at https://d.android.com,需要的朋友可以参考下
    2017-11-11
  • Kotlin Option与Either及Result实现异常处理详解

    Kotlin Option与Either及Result实现异常处理详解

    Kotlin异常处理,异常是在程序运行时可能发生的不必要的问题,并突然终止您的程序。异常处理是一个过程,使用它可以防止程序出现可能破坏我们代码的异常
    2022-12-12
  • 详解Android studio如何导入jar包方法

    详解Android studio如何导入jar包方法

    这篇内容主要给大家详细说明了如何导入jar包,以及Android studio遇到的各种问题和解决办法。
    2017-12-12
  • Android 自定义View实现多节点进度条功能

    Android 自定义View实现多节点进度条功能

    这篇文章主要介绍了Android 自定义View实现多节点进度条,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • Android 架构之数据库框架搭建

    Android 架构之数据库框架搭建

    这篇文章主要给大家介绍的是Android 架构之数据库框架搭建,在本篇中,将会让你一点一滴从无到有创建一个不再为数据库而烦恼的框架。需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • 深入解析android5.1 healthd

    深入解析android5.1 healthd

    这篇文章主要为大家详细介绍了android5.1 healthd的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Android draw9patch 图片制作与使用详解

    Android draw9patch 图片制作与使用详解

    本文主要介绍Android draw9patch的图片使用和制作,这里详细说明如何操作,并帮大家整理了几句口令,帮助大家记住,有兴趣的小伙伴可以参考下
    2016-09-09
  • AndroidStudio4.0日志中文乱码问题

    AndroidStudio4.0日志中文乱码问题

    这篇文章主要介绍了AndroidStudio4.0日志中文乱码问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10

最新评论