使用命名路由導航

在導航至新畫面並返回的範例中，您學到了如何建立一個新的路由並將其推送到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屬性定義了可用的命名路由以及導航到這些路由時要建立的 widget。

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(),
  },
)

有了 widget 和路由，透過使用Navigator.pushNamed()方法觸發導航。這會告訴 Flutter 建立 routes 表格中定義的 widget 並啟動畫面。

在 FirstScreen widget 的 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!'),
        ),
      ),
    );
  }
}

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面上次更新於 2024-06-26。 查看原始碼 或 回報問題。