Flutter 局部路由实现

时间: 2019-06-11阅读: 31标签: 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

撸完代码记得给颗星哦。


Flutter 混合开发 (交互通信)

Flutter 与原生之间的通信依赖灵活的消息传递方式:1,Flutter 部分通过平台通道将消息发送到其应用程序的所在的宿主环境(原生应用)。2,宿主环境通过监听平台通道,接收消息。

Flutter支持Web开发了!

Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了!我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。

Flutter1.5 开始,将成为全平台 UI 框架!

Flutter 1.5 的发布,同期也宣布发布 Flutter for Web 的 Preview 版本,正式开启了 Flutter 的全平台 UI 框架之路。早在年初发布的 Flutter 2019 Roadmap 中,就有提到,会在今年支持移动设备之外的平台,对 Web 的支持,算是完成了一个新的里程碑吧。

深入理解Flutter多线程

Flutter默认是单线程任务处理的,如果不开启新的线程,任务默认在主线程中处理。和iOS应用很像,在Dart的线程中也存在事件循环和消息队列的概念,但在Dart中线程叫做isolate。

初识flutter

关注flutter已经好久,因为没有发正式版,所以一直也不想过早的躺浑水,但是最近无意中看到几篇文章,再加上美团和咸鱼等app也一直在做灰度测试,所以上周开始看了一下官方文档,地址:https://flutter.io/docs/get-started/install,然后在此做一下总结。

移动跨平台框架Flutter介绍和学习线路

Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全