导航到新屏幕并返回 - Flutter

当您开发一个移动应用程序时，您可能需要在不同的屏幕之间进行导航。在 Flutter 中，您可以使用 Navigator 组件来实现这一目标。本文将简要介绍如何在 Flutter 中导航到新屏幕并返回。

跳转到新屏幕

要跳转到新屏幕，您需要使用 Navigator 组件，并在跳转之前将新屏幕嵌入到 MaterialApp 组件中。以下是一个示例：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

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

在上面的示例中，我们定义了两个屏幕： MyHomePage 和 SecondScreen。在 MyHomePage 中，我们定义了一个按钮，并在 onPressed 中使用 Navigator 组件将屏幕切换到 SecondScreen。在 SecondScreen 中，我们定义了另一个按钮，并在 onPressed 中使用 Navigator 组件返回到上一屏幕。

您还可以向新屏幕传递数据。要传递数据，请在跳转时将其作为参数传递，并在新屏幕中接收它们。以下是一个示例：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            String message = 'Hello from Home!';
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen(message: message)),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String message;

  SecondScreen({Key key, @required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              message,
              style: TextStyle(fontSize: 22),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Go back!'),
            ),
          ],
        ),
      ),
    );
  }
}

在上面的示例中，我们传递了一个消息字符串，并在新屏幕中将其显示出来。

结论

在本文中，我们介绍了如何在 Flutter 中导航到新屏幕并返回。使用 Navigator 组件，跳转到新屏幕并向新屏幕传递数据非常容易。