使用命名路由导航

在导航到新屏幕并返回的示例中，你学习了如何通过创建新路由并将其推送到Navigator来导航到新屏幕。

但是，如果你的应用需要在多个地方导航到同一个屏幕，这种方法可能会导致代码重复。解决方案是定义一个命名路由，并使用该命名路由进行导航。

要使用命名路由，请使用Navigator.pushNamed()函数。本示例复制了原始示例的功能，演示了如何使用以下步骤来使用命名路由：

1. 创建两个屏幕。
2. 定义路由。
3. 使用Navigator.pushNamed()导航到第二个屏幕。
4. 使用Navigator.pop()返回第一个屏幕。

首先，创建两个屏幕以便操作。第一个屏幕包含一个导航到第二个屏幕的按钮。第二个屏幕包含一个导航回第一个屏幕的按钮。

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate to the second screen when tapped.
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first screen when tapped.
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

接下来，通过向MaterialApp构造函数提供额外属性来定义路由：initialRoute和routes本身。

initialRoute属性定义了应用应从哪个路由开始。routes属性定义了可用的命名路由以及导航到这些路由时要构建的组件。

MaterialApp(
  title: 'Named Routes Demo',
  // Start the app with the "/" named route. In this case, the app starts
  // on the FirstScreen widget.
  initialRoute: '/',
  routes: {
    // When navigating to the "/" route, build the FirstScreen widget.
    '/': (context) => const FirstScreen(),
    // When navigating to the "/second" route, build the SecondScreen widget.
    '/second': (context) => const SecondScreen(),
  },
)

准备好组件和路由后，使用Navigator.pushNamed()方法触发导航。这会告诉Flutter构建在routes表中定义的组件并启动屏幕。

在FirstScreen组件的build()方法中，更新onPressed()回调函数

// Within the `FirstScreen` widget
onPressed: () {
  // Navigate to the second screen using a named route.
  Navigator.pushNamed(context, '/second');
}

要导航回第一个屏幕，请使用Navigator.pop()函数。

// Within the SecondScreen widget
onPressed: () {
  // Navigate back to the first screen by popping the current route
  // off the stack.
  Navigator.pop(context);
}

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Named Routes Demo',
      // Start the app with the "/" named route. In this case, the app starts
      // on the FirstScreen widget.
      initialRoute: '/',
      routes: {
        // When navigating to the "/" route, build the FirstScreen widget.
        '/': (context) => const FirstScreen(),
        // When navigating to the "/second" route, build the SecondScreen widget.
        '/second': (context) => const SecondScreen(),
      },
    ),
  );
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          // Within the `FirstScreen` widget
          onPressed: () {
            // Navigate to the second screen using a named route.
            Navigator.pushNamed(context, '/second');
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          // Within the SecondScreen widget
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}