Flutter Navigator无法正常工作

  • Z时代
  • 2024-01-10
  • 分类：问答

我有两个屏幕的应用程序，我想通过按按钮从第一屏幕推送到第二屏幕。

import 'package:flutter/material.dart';
import './view/second_page.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MainScreen();
  }
}
class MainScreen extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Scaffold(
            appBar: new AppBar(
                title: new Text("Title")
            ),
            body: new Center(
                child: new FlatButton(child: new Text("Second page"),
                    onPressed: () {
                      Navigator.push(context,
                          new MaterialPageRoute(
                              builder: (context) => new SecondPage()))
                    }
                )
            )
        )
    );
  }
}

import 'package:flutter/material.dart';
class SecondPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new SecondPageState();
  }
}
class SecondPageState extends State<SecondPage> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Title"),
      ),
      body: new Center(
        child: new Text("Some text"),
      ),
    );
  }
}

推不发生，我明白了

处理手势时引发了以下断言：请求的导航器操作使用了不包含导航器的上下文。用于从导航器推送或弹出路由的上下文必须是作为导航器小部件的后代的小部件的上下文。

引发了另一个异常：请求的导航器操作具有不包含导航器的上下文。

怎么了？

回答：

将Flutter中的小部件想像成一棵树，上下文指向使用build函数构建的任何节点。就你而言

MainScreen    <------ context
  --> MaterialApp
   (--> Navigator built within MaterialApp)
      --> Scaffold
        --> App Bar
          --> ...
        --> Center
          --> FlatButton

因此，当您使用上下文查找导航器时，将使用不在导航器下方的MainScreen上下文。

您可以创建一个新的Stateless或Stateful Widget子类来包含您的Center +

FlatButton，因为其中的构建函数将指向该级别，或者您可以使用Builder并定义builder回调（其上下文指向Builder ）返回Center + FlatButton。

以上是 Flutter Navigator无法正常工作 的全部内容， 来源链接： utcz.com/qa/404364.html

回到顶部