摘要:是借鑒的開發(fā)思想實(shí)現(xiàn)的,在子組件的插槽上,有,有。當(dāng)然也有類似的,那就是,不過是以的形式實(shí)現(xiàn)像。的使用無非個(gè)屬性初始路由匹配路由在實(shí)現(xiàn)層面首先的高度為。最后執(zhí)行尋找路由順序是,這個(gè)和的是類似的。
Flutter是借鑒React的開發(fā)思想實(shí)現(xiàn)的,在子組件的插槽上,React有this.props.children,Vue有
當(dāng)然Flutter也有類似的Widget,那就是Navigator,不過是以router的形式實(shí)現(xiàn)(像
Navigator的使用無非3個(gè)屬性
initialRoute: 初始路由
onGenerateRoute: 匹配路由
onUnknownRoute: 404
在實(shí)現(xiàn)層面
首先:Navigator的高度為infinity。如果直接父級非最上級也是infinity會(huì)產(chǎn)生異常,例如,Scaffold -> Column -> Navigator。所以:Navigator需要附件限制高度,例如:Scaffold -> Column -> Container(height: 300) -> Navigator
然后:在onGenerateRoute屬性中,使用第一個(gè)BuildContext參數(shù),能夠在MaterialApp未設(shè)置route的情況下使用Navigator.pushNamed(nContext, "/efg");跳到對應(yīng)的子路由中。
最后:Navigator執(zhí)行尋找路由順序是 initialRoute -> onGenerateRoute -> onUnknownRoute,這個(gè)和React的Route是類似的。
最后附上源碼
import "package:flutter/material.dart"; class NavigatorPage extends StatefulWidget { @override _NavigatorPageState createState() => _NavigatorPageState(); } class _NavigatorPageState extends State項(xiàng)目地址: https://github.com/zhongmeizhi/fultter-example-app{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Navigator"), ), body: Column( children: [ Text("Navigator的高度為infinity"), Text("如果直接父級非最上級也是infinity會(huì)產(chǎn)生異常"), 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 animation, Animation secondaryAnimation) => Column( // 并沒有在 MaterialApp 中設(shè)定 /efg 路由 // 因?yàn)镹avigator的特性 使用nContext 可以跳轉(zhuǎn) /efg children: [ Text("呵呵呵"), RaisedButton( child: Text("去 /efg"), onPressed: () { Navigator.pushNamed(nContext, "/efg"); }, ) ], ); break; case "/efg": builder = (BuildContext nContext, Animation animation, Animation secondaryAnimation) => Row( children: [ RaisedButton( child: Text("去 /hhh"), onPressed: () { Navigator.pushNamed(nContext, "/hhh"); }, ) ], ); break; default: builder = (BuildContext nContext, Animation animation, Animation 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: [] ), ), Text("Navigator執(zhí)行尋找路由順序"), Text("initialRoute"), Text("onGenerateRoute"), Text("onUnknownRoute"), ], ), ); } }
擼完代碼記得給顆星哦。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/104591.html
摘要:接下來,我將從原理優(yōu)缺點(diǎn)等方面為大家分享跨平臺技術(shù)演進(jìn)。小程序年是微信小程序飛速發(fā)展的一年,年,各大廠商快速跟進(jìn),已經(jīng)有了很大的影響力。下面,我們以微信小程序?yàn)槔治鲂〕绦虻募夹g(shù)架構(gòu)。 前言 大家好,我是simbawu ,@BooheeFE Team Leader,關(guān)于這篇文章,有問題歡迎來這里討論。 隨著移動(dòng)互聯(lián)網(wǎng)的普及和快速發(fā)展,手機(jī)成了互聯(lián)網(wǎng)行業(yè)最大的流量分發(fā)入口。以及隨著5G...
摘要:接下來,我將從原理優(yōu)缺點(diǎn)等方面為大家分享跨平臺技術(shù)演進(jìn)。小程序年是微信小程序飛速發(fā)展的一年,年,各大廠商快速跟進(jìn),已經(jīng)有了很大的影響力。下面,我們以微信小程序?yàn)槔?,分析小程序的技術(shù)架構(gòu)。 前言 大家好,我是simbawu ,@BooheeFE Team Leader,關(guān)于這篇文章,有問題歡迎來這里討論。 隨著移動(dòng)互聯(lián)網(wǎng)的普及和快速發(fā)展,手機(jī)成了互聯(lián)網(wǎng)行業(yè)最大的流量分發(fā)入口。以及隨著5G...
閱讀 1873·2023-04-25 14:28
閱讀 1906·2021-11-19 09:40
閱讀 2810·2021-11-17 09:33
閱讀 1395·2021-11-02 14:48
閱讀 1726·2019-08-29 16:36
閱讀 3345·2019-08-29 16:09
閱讀 2928·2019-08-29 14:17
閱讀 2391·2019-08-29 14:07