Flutter 初识：导航控件

路由与导航

Navigator

Navigator 用于管理应用程序的路由，通过堆栈结构来实现页面的进出。它支持页面的推入（push）和弹出（pop）操作，允许在应用中进行复杂的导航模式。

核心方法

• Navigator.push: 将新页面推入导航堆栈。
• Navigator.pop: 从导航堆栈中弹出当前页面。
• Navigator.pushReplacement: 替换当前页面，并将新页面推入导航堆栈。
• Navigator.pushNamed: 使用命名路由推入新页面。
• Navigator.popUntil: 弹出导航堆栈中的页面直到满足特定条件。
• Navigator.pushAndRemoveUntil: 推入新页面并移除所有先前的页面，直到满足特定条件。
• Navigator.maybePop: 尝试从导航堆栈中弹出当前页面，如果没有更多页面可以弹出，则返回false。

属性

• initialRoute: 应用启动时的初始路由。
• onGenerateRoute: 动态生成路由的回调函数。
• onUnknownRoute: 当无法找到匹配路由时调用的回调函数。

示例

基本导航示例

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

Navigator.pop(context);

替换当前页面并推入新页面

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

使用命名路由

定义命名路由：

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => FirstPage(),
      '/second': (context) => SecondPage(),
    },
  ));
}

使用命名路由导航：

Navigator.pushNamed(context, '/second');

动态生成路由

void main() {
  runApp(MaterialApp(
    onGenerateRoute: (settings) {
      if (settings.name == '/second') {
        return MaterialPageRoute(
          builder: (context) => SecondPage(),
        );
      }
      // Define other routes here
      assert(false, 'Need to implement ${settings.name}');
      return null;
    },
  ));
}

额外的导航功能

推入新页面并移除所有先前的页面，直到满足特定条件

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
  ModalRoute.withName('/'),
);

尝试从导航堆栈中弹出当前页面

bool popped = await Navigator.maybePop(context);
if (!popped) {
  // Handle the case where there are no more pages to pop
}

完整示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First Page")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondPage()),
                );
              },
              child: Text('Push to Second Page'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => SecondPage()),
                );
              },
              child: Text('PushReplace to Second Page'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
              child: Text('Go to Third Page with Named Route'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Page")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context, 'Data from Second Page');
              },
              child: Text('Pop and Return Data'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.popUntil(context, ModalRoute.withName('/'));
              },
              child: Text('Pop Until First Page'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushAndRemoveUntil(
                  context,
                  MaterialPageRoute(builder: (context) => ThirdPage()),
                  ModalRoute.withName('/'),
                );
              },
              child: Text('Push and Remove Until First Page'),
            ),
          ],
        ),
      ),
    )