Flutter Navigator Widget使用详解

在Flutter中，Navigator Widget允许您在多个页面之间进行导航。它允许您在新页面上推送新路由并在栈中保留当前页面，以便在用户导航回该页面时可以恢复其状态。以下是Navigator Widget的使用详解。

Navigator的基本用法

要使用Navigator Widget，您需要执行以下步骤：

• 在您的应用程序中包含MaterialApp Widget。这是因为Navigator Widget是Material组件库的一部分，因此需要一个Material风格的应用程序。
• 使用Navigator.push()方法将新路由推送到堆栈上。
• 使用Navigator.pop()方法将当前路由从堆栈上弹出并返回到上一个路由。

以下是一个简单的Navigator示例，该示例推送一个新页面并在关闭后返回上一个页面：

import 'package:flutter/material.dart';

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

在上面的示例中，我们创建了一个MaterialApp Widget，并将HomePage Widget作为应用程序的初始页面。在HomePage Widget中，我们使用RaisedButton Widget创建一个打开第二页的按钮。当用户点击该按钮时，我们使用Navigator.push()方法将第二页推送到堆栈上。在SecondPage Widget中，我们创建了一个返回上一页的按钮，并使用Navigator.pop()方法将当前路由从堆栈中弹出。

传递数据给新路由

有时，您可能需要在新页面上显示数据。您可以使用Navigator.push()方法的第二个参数，即Route对象，来传递数据。