Que1. 页面跳转error

RaisedButton 下 onPressed 内跳转页面报error

错误代码如下

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

错误信息如下

Another exception was thrown: Navigator operation requested with a context that does not include a Navigator

根据错误信息，错误原因是因为使用的context不包含Navigator实例作为父widget。
也就是在所有的当前用到过的widget中，都没有以Navigator作为父widget的widge。

首先，MaterialApp作为根widget，判断是会能响应跳转页面事件的，其次查看官方文档，看到其中是有navigation相关的，判断MaterialApp是包含Navigator子widget的，能响应跳转事件

MaterialApp-官方文档

那说明在找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

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MainApp',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text("Test"),
        onPressed: () {
          print('click-OK');
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => SecondPage()));
        },
      ),
    );
  }
}

• 方式二：
  使用Builder

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