import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Center(
child: RaisedButton(
child: Text("Test"),
onPressed: () {
print('click-OK');
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondPage()));
},
),
),
);
}
}
根據錯誤信息,錯誤原因是因為使用的context不包含Navigator實例作為父widget。
也就是在所有的當前用到過的widget中,都沒有以Navigator作為父widget的widge。
首先,MaterialApp作為根widget,判斷是會能響應跳轉頁面事件的,其次查看官方文檔,看到其中是有navigation相關的,判斷MaterialApp是包含Navigator子widget的,能響應跳轉事件
那說明在找widget的時候沒有在MaterialApp中去找。
查找資料發現
This happens because when you do Navigator.of(context), it will start from the widget associated to the context used. And then go upward in the widget tree until it either find a Navigator or there's no more widget.
這是因為當您執行Navigator.of(context)時,它將從與所使用的context關聯的小部件開始。然后在窗口小部件樹中向上移動,直到找到導航器或者不再有窗口小部件。
再回到關鍵性的跳轉代碼
Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()) );
context 上下文 是MyApp的Context,所以直接根本不會在MyApp下的子widget中去找,所以也不可能找到MaterialApp和下面的子widget,而在MyApp上面是沒有widget的,MyApp又是咱們自己創建的並沒有包含Navigator,所以無法實現跳轉。
問題解決
- 方式一:
在MaterialApp下引入一個widget,讓Navigator調用該widget的context去找響應跳轉的widget
1 import 'package:flutter/material.dart'; 2 3 void main() => runApp(MyApp()); 4 5 class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 title: 'MainApp', 10 home: MainPage(), 11 ); 12 } 13 } 14 15 class MainPage extends StatelessWidget { 16 @override 17 Widget build(BuildContext context) { 18 return Center( 19 child: RaisedButton( 20 child: Text("Test"), 21 onPressed: () { 22 print('click-OK'); 23 Navigator.push(context, 24 MaterialPageRoute(builder: (context) => SecondPage())); 25 }, 26 ), 27 ); 28 } 29 }
方式二:
使用Builder
mport 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Builder( builder: (context) => Center( child: RaisedButton( child: Text("Test"), onPressed: () { print('click-OK'); Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage())); }, ), ), ), ); } }