Flutter中怎么實現局部路由

Flutter中怎么實現局部路由，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

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'),    ],   ),  ); }}

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。