切换页面

Question

我有一个使用Drawer Widget创建的侧面菜单，我想在侧面菜单中的页面之间导航。我正在使用Navigator.push（）这样做，但是由于某些原因，页面不会更改。

这些项目显示在侧面菜单中，但是当单击时，页面保持不变。有人知道我在滥用Navigator.push（）吗？

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Grid App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grip App'),
        ),
        body: Center(
          child: Text('Hello, this is the start page!'),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text("Navigation"),
                decoration: BoxDecoration(
                color: Colors.grey[700]
                ),
              ),
              ListTile(
                title: Text("First Page"),
                onTap: (){
                  Navigator.push(
                    context, 
                    MaterialPageRoute(builder: (context) => FirstPage()),);
                },
              ),
              ListTile(
                title: new Text("Second Page"),
                onTap: () {
                  Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new SecondPage()),);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
        body: Center(
          child: Text("You're on the first page!"),
        ),
    );
  }
}

class SecondPage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
        body: Text("This is the second page"),
    );
  }
}

Answer 1

快速修复

void main() => runApp(MaterialApp(home: MyApp()));

---

您遇到的错误

您当前的代码显示以下错误，您也可以在控制台中看到它

  

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

     

---

您可以采用MaterialApp或Builder

来解决此问题

Answer 2

如果您在正在使用的MateriaApp上下文中进行操作，则导航器将无法工作。将MaterialApp小部件删除到main（）或为此创建另一个小部件。

尝试一下：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MaterialApp(
  home: MyApp(),
));

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(
          title: Text('Grip App'),
        ),
        body: Center(
          child: Text('Hello, this is the start page!'),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text("Navigation"),
                decoration: BoxDecoration(
                color: Colors.grey[700]
                ),
              ),
              ListTile(
                title: Text("First Page"),
                onTap: (){
                  Navigator.push(
                    context, 
                    MaterialPageRoute(builder: (context) => FirstPage()),);
                },
              ),
              ListTile(
                title: new Text("Second Page"),
                onTap: () {
                  Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new SecondPage()),);
                },
              ),
            ],
          ),
        ),
    );
  }
}

class FirstPage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
        body: Center(
          child: Text("You're on the first page!"),
        ),
    );
  }
}

class SecondPage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
        body: Text("This is the second page"),
    );
  }
}

Answer 3

这里最大的问题是使用了错误的上下文。

您不能将App上下文用于Navigator。尝试使用Builder

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Grid App',
      home: Builder(
        builder: (context) => buildScaffold(context),
      ),
    );
  }

  Scaffold buildScaffold(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grip App'),
      ),
      body: Center(
        child: Text('Hello, this is the start page!'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text("Navigation"),
              decoration: BoxDecoration(color: Colors.grey[700]),
            ),
            ListTile(
              title: Text("First Page"),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => FirstPage()),
                );
              },
            ),
            ListTile(
              title: new Text("Second Page"),
              onTap: () {
                Navigator.push(
                  context,
                  new MaterialPageRoute(builder: (context) => new SecondPage()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Answer 4

只需将 MaterialApp 与另一个屏幕分开。只需右键单击 Scaffold 小部件，然后选择 Extract Widget 。给您的小部件命名，它将代码提取到另一个无状态小部件中。

将此代码复制粘贴到dartpad并运行

import 'package:flutter/material.dart';

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

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

class NewApp extends StatelessWidget {
  const NewApp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grip App'),
      ),
      body: Center(
        child: Text('Hello, this is the start page!'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text("Navigation"),
              decoration: BoxDecoration(
              color: Colors.grey[700]
              ),
            ),
            ListTile(
              title: Text("First Page"),
              onTap: (){
                Navigator.push(
                  context, 
                  MaterialPageRoute(builder: (context) => FirstPage()),);
              },
            ),
            ListTile(
              title: new Text("Second Page"),
              onTap: () {
                Navigator.push(context,
                  new MaterialPageRoute(builder: (context) => new SecondPage()),);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
        body: Center(
          child: Text("You're on the first page!"),
        ),
    );
  }
}

class SecondPage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
        body: Text("This is the second page"),
    );
  }
}