文章目錄

• 一、報錯信息
• 二、問題分析
• 三、解決方案

一、報錯信息

---

Flutter 界面跳轉(zhuǎn)時 , 報如下錯誤 :

======== Exception caught by gesture =============================================================== The following assertion was thrown while handling a gesture: Navigator operation requested with a context that does not include a Navigator.The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget. When the exception was thrown, this was the stack: #0 Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:2711:9) #1 Navigator.of (package:flutter/src/widgets/navigator.dart:2718:6) #2 HeroAnimation.build.<anonymous closure> (package:flutter_animation/main.dart:57:25) #3 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:994:20) #4 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24) ... Handler: "onTap" Recognizer: TapGestureRecognizer#68181debugOwner: GestureDetectorstate: possiblewon arenafinalPosition: Offset(216.4, 420.6)finalLocalPosition: Offset(160.7, 193.9)button: 1sent tap down ====================================================================================================

錯誤代碼 :

void main() {runApp(HeroAnimation()); }class HeroAnimation extends StatelessWidget{@overrideWidget build(BuildContext context) {// 時間膨脹系數(shù) , 用于降低動畫運行速度timeDilation = 10.0;return MaterialApp(home: Scaffold(body: Container(child: HeroWidget(imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",width: 300,// 點擊事件 , 這里點擊該組件后 , 跳轉(zhuǎn)到新頁面onTap: (){print("點擊事件觸發(fā)");Navigator.of(context).push(MaterialPageRoute(builder: (context){/// 跳轉(zhuǎn)到的新界面再此處定義return MaterialApp(home: Scaffold(body: Container(color: Colors.white,padding: EdgeInsets.all(20),alignment: Alignment.topLeft,child: HeroWidget(imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",width: 100,onTap: (){/// 退出當前界面Navigator.of(context).pop();},),),),);}));},),),),);} }

二、問題分析

---

Navigator operation requested with a context that does not include a Navigator.

該錯誤與跳轉(zhuǎn)的目標界面無關 , 只與當前的界面有關 ;

The [MaterialApp] configures the top-level [Navigator] to search for routes in the following order:1. For the `/` route, the [home] property, if non-null, is used.2. Otherwise, the [routes] table is used, if it has an entry for the route.3. Otherwise, [onGenerateRoute] is called, if provided. It should return anon-null value for any _valid_ route not handled by [home] and [routes].4. Finally if all else fails [onUnknownRoute] is called.If a [Navigator] is created, at least one of these options must handle the `/` route, since it is used when an invalid [initialRoute] is specified on startup (e.g. by another application launching this one with an intent on Android; see [dart:ui.PlatformDispatcher.defaultRouteName]). This widget also configures the observer of the top-level [Navigator] (if any) to perform [Hero] animations.If [home], [routes], [onGenerateRoute], and [onUnknownRoute] are all null, and [builder] is not null, then no [Navigator] is created.

上面是 MaterialApp 的注釋 , MaterialApp 中會自動創(chuàng)建一個 Navigator , 此處使用了 MaterialApp 仍然報上述錯誤 ;

Navigator 查找機制 : 這是由于調(diào)用了 Navigator.of(context) 代碼獲取 Navigator , 注意這里的 context 上下文關聯(lián)的是 StatelessWidget 組件 , 也就是數(shù)從該 StatelessWidget 組件開始 , 向上查找 Navigator ;

但是實際的層級是這樣的 , StatelessWidget 包裹 MaterialApp 包裹 Scaffold 包裹 Container , 查找 Navigator 時 , 越過了 MaterialApp , 直接從最頂層的 StatelessWidget 組件開始向上查找 , 肯定找不到 Navigator , 這里直接報錯了 ;

這是由于 Navigator 的查找機制導致的錯誤 , 解決這個問題也很簡單 , 在 StatelessWidget 的外層再包裹一個 MaterialApp , 這樣就可以解決問題了 ;

三、解決方案

---

在 main.dart 中的 main() 函數(shù)中 , 使用 MaterialApp 包裹界面跳轉(zhuǎn)的組件 ;

這樣在 StatelessWidget 組件的外層又包裹了一層 MaterialApp , 這樣從 StatelessWidget 組件開始向上查找 Navigator , 就可以找到 Navigator , 問題解決 ;

void main() {runApp(MaterialApp(title: "Hero 動畫",home: HeroAnimation(),)); }

總結(jié)

以上是生活随笔為你收集整理的【错误记录】Flutter 界面跳转报错 ( Navigator operation requested with a context that does not include a Naviga )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。