Flutter 局部路由實現(xiàn)詳解
Flutter是借鑒React的開發(fā)思想實現(xiàn)的,在子組件的插槽上,React有this.props.children,Vue有<slot></slot>。
當(dāng)然Flutter也有類似的Widget,那就是Navigator,不過是以router的形式實現(xiàn)(像<router-view></router-view>???)。
Navigator的使用無非3個屬性
- initialRoute: 初始路由
- onGenerateRoute: 匹配路由
- onUnknownRoute: 404
在實現(xiàn)層面
首先:Navigator的高度為infinity。如果直接父級非最上級也是infinity會產(chǎn)生異常,例如,Scaffold -> Column -> Navigator。所以:Navigator需要附件限制高度,例如:Scaffold -> Column -> Container(height: 300) -> Navigator
然后:在onGenerateRoute屬性中,使用第一個BuildContext參數(shù),能夠在MaterialApp未設(shè)置route的情況下使用Navigator.pushNamed(nContext, '/efg');跳到對應(yīng)的子路由中。
最后:Navigator執(zhí)行尋找路由順序是 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會產(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<double> animation, Animation<double> secondaryAnimation) => Column( // 并沒有在 MaterialApp 中設(shè)定 /efg 路由 // 因為Navigator的特性 使用nContext 可以跳轉(zhuǎn) /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執(zhí)行尋找路由順序'), Text('initialRoute'), Text('onGenerateRoute'), Text('onUnknownRoute'), ], ), ); } }
項目地址: https://github.com/zhongmeizhi/fultter-example-app
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android隱藏標(biāo)題欄及解決啟動閃過標(biāo)題的實例詳解
這篇文章主要介紹了Android隱藏標(biāo)題欄及解決啟動閃過標(biāo)題的實例詳解的相關(guān)資料,這里提供兩種方法幫助大家解決這種問題,需要的朋友可以參考下2017-09-09Android開發(fā)之微信底部菜單欄實現(xiàn)的幾種方法匯總
這篇文章主要介紹了Android開發(fā)之微信底部菜單欄實現(xiàn)的幾種方法,下面小編把每種方法通過實例逐一給大家介紹,需要的朋友可以參考下2016-09-09Android onKeyDown監(jiān)聽返回鍵無效的解決辦法
這篇文章主要介紹了 Android onKeyDown監(jiān)聽返回鍵無效的解決辦法的相關(guān)資料,需要的朋友可以參考下2017-06-06Jetpack Compose實現(xiàn)動畫效果的方法詳解
compose為支持動畫提供了大量的 api,通過這些 api 我們可以輕松實現(xiàn)動畫效果。本文將為大家介紹利用compose實現(xiàn)的多種動畫效果的示例代碼,需要的可以參考一下2022-02-02Android SQLite操作之大數(shù)據(jù)處理與同時讀寫方法
這篇文章主要介紹了Android SQLite操作之大數(shù)據(jù)處理與同時讀寫方法,實例分析了Android操作SQLite時基于事務(wù)的數(shù)據(jù)緩存與批量插入技巧,以及同時讀寫的相關(guān)實現(xiàn)方法與注意事項,需要的朋友可以參考下2016-07-07AndroidStudio圖片壓縮工具ImgCompressPlugin使用實例
這篇文章主要為大家介紹了AndroidStudio圖片壓縮工具ImgCompressPlugin使用實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Android?Studio?2022.1.1創(chuàng)建項目的Gradle配置問題
這篇文章主要介紹了Android?Studio?2022.1.1創(chuàng)建項目的Gradle配置問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04