跳至主要內容
目錄

導覽器的頁面 API 變更

目錄

摘要

#

Navigator 的頁面 API已重構，以便它們可以與 Flutter 的其他彈出機制整合。

背景

#

新增了 onPopPage 屬性，用於在頁面即將被彈出後進行清理。若要阻止彈出，您可以在回呼函式中返回 false。但這個機制與框架中其他彈出機制（例如 PopScope 和 iOS 返回手勢）配合不佳。

為了整合框架的彈出機制，需要重構頁面 API。

變更說明

#

onDidRemovePage 屬性取代了 onPopPage 屬性。您無法再在 onDidRemovePage 屬性中阻止彈出。相反地，您僅需負責更新 pages。

現在，阻止彈出的機制由 Page.canPop 和 Page.onPopInvoked 屬性管理。這些屬性的運作方式與您使用 PopScope 小工具類似。

遷移指南

#

遷移前的程式碼

dart
import 'package:flutter/material.dart';

final MaterialPage<void> page1 = MaterialPage<void>(child: Placeholder());
final MaterialPage<void> page2 = MaterialPage<void>(child: Placeholder());
final MaterialPage<void> page3 = MaterialPage<void>(child: Placeholder());

void main() {
  final List<Page<void>> pages = <Page<void>>[page1, page2, page3];
  runApp(
    MaterialApp(
      home: Navigator(
        pages: pages,
        onPopPage: (Route<Object?> route, Object? result) {
          if (route.settings == page2) {
            return false;
          }
          if (route.didPop) {
            pages.remove(route.settings);
            return true;
          }
          return false;
        },
      ),
    ),
  );
}

遷移後的程式碼

dart
import 'package:flutter/material.dart';

final MaterialPage<void> page1 = MaterialPage<void>(child: Placeholder());
final MaterialPage<void> page2 = MaterialPage<void>(canPop: false, child: Placeholder());
final MaterialPage<void> page3 = MaterialPage<void>(child: Placeholder());

void main() {
  final List<Page<void>> pages = <Page<void>>[page1, page2, page3];
  runApp(
    MaterialApp(
      home: Navigator(
        pages: pages,
        onDidRemovePage: (Page<Object?> page) {
          pages.remove(page);
        },
      ),
    ),
  );
}

時間軸

#

首次出現在版本：3.22.0-32.0.pre
穩定版本：3.24.0

參考資料

#

API 文件

相關議題

相關 PR

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