Flutter 局部路由实现详解

 更新时间:2019-06-11 18:01:17   作者:佚名   我要评论(0)

Flutter是借鉴React的开发思想实现的,在子组件的插槽上,React有this.props.children,Vue有<slot></slot>。
当然Flutter也有类似的Widget,那就是Navigator

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

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

您可能感兴趣的文章:

  • Flutter路由的跳转、动画和传参详解(最简单)

相关文章

  • Flutter 局部路由实现详解

    Flutter 局部路由实现详解

    Flutter是借鉴React的开发思想实现的,在子组件的插槽上,React有this.props.children,Vue有<slot></slot>。 当然Flutter也有类似的Widget,那就是Navigator
    2019-06-11
  • redis适合场景八点总结

    redis适合场景八点总结

    redis适合什么场景? 1、缓存 缓存现在几乎是所有中大型网站都在用的必杀技,合理的利用缓存不仅能够提升网站访问速度,还能大大降低数据库的压力。Redis提供
    2019-06-11
  • 解决django后台样式丢失,css资源加载失败的问题

    解决django后台样式丢失,css资源加载失败的问题

    就像这个图的样子: 解决方法,setting.py中DEBUG选项为True,否则无法映射到静态文件目录 以上这篇解决django后台样式丢失,css资源加载失败的问题就是小编分
    2019-06-11
  • 人工神经网络算法知识点总结

    人工神经网络算法知识点总结

    人工神经网络的许多算法已在智能信息处理系统中获得广泛采用,尤为突出是是以下4种算法:ART网络、LVQ网络、Kohonen网络Hopfield网络,下面就具体介绍一下这这
    2019-06-11
  • Vue+element 解决浏览器自动填充记住的账号密码问题

    Vue+element 解决浏览器自动填充记住的账号密码问题

    我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中 登录页面也就算了,但是注册页面就
    2019-06-11
  • python-tkinter之按钮的使用,开关方法

    python-tkinter之按钮的使用,开关方法

    具体参考哪位大佬的,记不太清楚了。 直接上代码,大体逻辑是这样的。 # -*- coding:utf-8 -*- from tkinter import * root=Tk() def g(): if b['text'
    2019-06-11
  • Android自定义相机Camera实现手动对焦的方法示例

    Android自定义相机Camera实现手动对焦的方法示例

    前言 我采用的是Camera来实现自定义相机的,如果你使用的是Camera2,那本文将不适用你。为了减少篇幅,本文主要讲解手动对焦的实现方式,前提是你已经能实现自
    2019-06-11
  • Flutter部件内部状态管理小结之实现Vue的v-model功能

    Flutter部件内部状态管理小结之实现Vue的v-model功能

    Flutter部件内部状态管理 本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能。
    2019-06-11
  • 三步实现Django Paginator分页的方法

    三步实现Django Paginator分页的方法

    Django提供了一个新的类来帮助管理分页数据,这个类存放在django/core/paginator.py.它可以接收列表、元组或其它可迭代的对象。本文将分三步介绍Django Pagin
    2019-06-11
  • vue实现路由懒加载及组件懒加载的方式

    vue实现路由懒加载及组件懒加载的方式

    一、为什么要使用路由懒加载   为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。 二、定义   懒加载简单来说就是延迟加载或按需加载,
    2019-06-11

最新评论