Flutter 局部路由實(shí)現(xiàn)詳解
Flutter是借鑒React的開發(fā)思想實(shí)現(xiàn)的,在子組件的插槽上,React有this.props.children,Vue有<slot></slot>。
當(dāng)然Flutter也有類似的Widget,那就是Navigator,不過是以router的形式實(shí)現(xiàn)(像<router-view></router-view>???)。
Navigator的使用無非3個(gè)屬性
- initialRoute: 初始路由
- onGenerateRoute: 匹配路由
- onUnknownRoute: 404
在實(shí)現(xiàn)層面
首先:Navigator的高度為infinity。如果直接父級非最上級也是infinity會產(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<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 路由
// 因?yàn)镹avigator的特性 使用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'),
],
),
);
}
}
項(xiàng)目地址: https://github.com/zhongmeizhi/fultter-example-app
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android隱藏標(biāo)題欄及解決啟動(dòng)閃過標(biāo)題的實(shí)例詳解
這篇文章主要介紹了Android隱藏標(biāo)題欄及解決啟動(dòng)閃過標(biāo)題的實(shí)例詳解的相關(guān)資料,這里提供兩種方法幫助大家解決這種問題,需要的朋友可以參考下2017-09-09
Android開發(fā)之微信底部菜單欄實(shí)現(xiàn)的幾種方法匯總
這篇文章主要介紹了Android開發(fā)之微信底部菜單欄實(shí)現(xiàn)的幾種方法,下面小編把每種方法通過實(shí)例逐一給大家介紹,需要的朋友可以參考下2016-09-09
Android onKeyDown監(jiān)聽返回鍵無效的解決辦法
這篇文章主要介紹了 Android onKeyDown監(jiān)聽返回鍵無效的解決辦法的相關(guān)資料,需要的朋友可以參考下2017-06-06
Jetpack Compose實(shí)現(xiàn)動(dòng)畫效果的方法詳解
compose為支持動(dòng)畫提供了大量的 api,通過這些 api 我們可以輕松實(shí)現(xiàn)動(dòng)畫效果。本文將為大家介紹利用compose實(shí)現(xiàn)的多種動(dòng)畫效果的示例代碼,需要的可以參考一下2022-02-02
Android SQLite操作之大數(shù)據(jù)處理與同時(shí)讀寫方法
這篇文章主要介紹了Android SQLite操作之大數(shù)據(jù)處理與同時(shí)讀寫方法,實(shí)例分析了Android操作SQLite時(shí)基于事務(wù)的數(shù)據(jù)緩存與批量插入技巧,以及同時(shí)讀寫的相關(guān)實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2016-07-07
AndroidStudio圖片壓縮工具ImgCompressPlugin使用實(shí)例
這篇文章主要為大家介紹了AndroidStudio圖片壓縮工具ImgCompressPlugin使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
Android?Studio?2022.1.1創(chuàng)建項(xiàng)目的Gradle配置問題
這篇文章主要介紹了Android?Studio?2022.1.1創(chuàng)建項(xiàng)目的Gradle配置問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
談?wù)凙ndroid6.0運(yùn)行時(shí)的權(quán)限處理
之前有人在 Android 6.0 的機(jī)型上運(yùn)行了DragGridView結(jié)果出異常奔潰了。想必問題的原因大家都知道,是Android 6.0新引入了在運(yùn)行時(shí)權(quán)限申請(Runtime Permissions)的功能。那么這所謂的運(yùn)行時(shí)申請權(quán)限究竟是怎么一回事呢,下面跟著小編一起來看看吧!2016-08-08

