• 一、術語
  • • 路由(route)：
    • 導航(Navigator):
• 二、路由管理
  • 1、Navigator示例代碼
  • 2、路由定義(命名路由)
    • • 在App中定義router:
  • 3、Navigator方法介紹
    • 1.Navigator.push
    • 2.Navigor.pop
    • 3.其他
  • 3、路由傳值
    • 示例代碼
      • 定義傳值Model
      • 使用pushNamed傳遞資料
      • 獲取資料
  • 4、其他
    • 1.回傳到指定頁面
    • 2.跳轉指定頁面，并銷毀當前頁
    • 3.推出當前頁，然后跳轉指定頁

一、術語

路由(route)：

• 在 Flutter 中，屏 (screen) 和 頁面 (page) 都叫做 路由 (route)，
• 在 Android 開發中，Activity 相當于“路由”，在 iOS 開發中，ViewController 相當于“路由”，在 Flutter 中，“路由”也是一個 widget，

導航(Navigator):

• Navigator是一個路由管理的組件，它提供了打開和退出路由頁方法，Navigator官方鏈接
• Navigator常用的路由管理方法包括push和pop

二、路由管理

1、Navigator示例代碼

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        routes: {
          '/': (context) => const HomePage(),
          '/second': (context) => const SecondScreen(),
        });
  }
}

/// 第一個頁面
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(
                    builder: (context) => const SecondScreen(),
                  ),
                );
              },
              child: const Text('使用Navigator+構造器跳轉'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
              child: const Text('使用Navigator+命名路由跳轉'),
            ),
          ],
        ),
      ),
    );
  }
}

/// 第二個頁面
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: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

2、路由定義(命名路由)

在App中定義router:

routes: {
          '/': (context) => const HomePage(),
          '/second': (context) => const SecondScreen(),
        }

3、Navigator方法介紹

1.Navigator.push

• push(BuildContext context, Route route)

將給定的路由入堆疊（即打開新的頁面），回傳值是一個Future物件，用以接收新路由出堆疊（即關閉）時的回傳資料，

• pushNamed(BuildContext context, String routeName, {Object? arguments,})

將給定的路由名入堆疊，回傳值是一個Future物件，用以接收新路由出堆疊（即關閉）時的回傳資料，

2.Navigor.pop

• pop(BuildContext context, [ T? result ])

將堆疊頂路由出堆疊，result為頁面關閉時回傳給上一個頁面的資料

3.其他

Navigator還有很多其他方法，如Navigator.replace、Navigator.popUntil等，具體參考Navigator官方鏈接

3、路由傳值

示例代碼

定義傳值Model

class DetailInfo {
  final String title;
  final String message;
  final String? other;

  DetailInfo(this.title, this.message,{this.other});
}

使用pushNamed傳遞資料

Navigator.pushNamed(context, '/second', arguments: DetailInfo('詳情頁','回傳'));

獲取資料

使用MaterialPageRoute中的ModalRoute來獲取路由引數，注意要避空

final detail = ModalRoute.of(context)?.settings.arguments as DetailInfo?;

完整代碼:

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

  @override
  Widget build(BuildContext context) {

    final detail = ModalRoute.of(context)?.settings.arguments as DetailInfo?;

    return Scaffold(
      appBar: AppBar(
        title: Text(detail?.title ?? ''),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text(detail?.message ?? ''),
        ),
      ),
    );
  }
}

4、其他

1.回傳到指定頁面

Navigator.popUntil(context, ModalRoute.withName('/'));

2.跳轉指定頁面，并銷毀當前頁

Navigator.pushReplacementNamed(context, '/third');

3.推出當前頁，然后跳轉指定頁

會有一個推出的影片效果

Navigator.popAndPushNamed(context, '/third');

標籤：其他

上一篇：SpringCloud微服務實戰——搭建企業級開發框架（四十六）：【移動開發】整合uni-app搭建移動端快速開發框架-環境搭建

下一篇：分享幾個關于Camera的坑