一个理想主义者的创业故事,汉滨区法院,谭凯文
flutter是借鉴react的开发思想实现的,在子组件的插槽上,react有this.props.children,vue有<slot></slot>。
当然flutter也有类似的widget,那就是navigator,不过是以router的形式实现(像<router-view></router-view>???)。
navigator的使用无非3个属性
在实现层面
首先: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'), ], ), ); } }
项目地址:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Android apk 项目一键打包并上传到蒲公英的实现方法
Android 自定义LineLayout实现满屏任意拖动功能的示例代码
android 限制某个操作每天只能操作指定的次数(示例代码详解)
Android 集成 google 登录并获取性别等隐私信息的实现代码
网友评论