Flutter 之頁面切換（命名路由）

命名路由

之前的文章介紹過基本路由，使用基本路由相對簡單靈活，適用於應用中頁面不多的場景。而在應用中頁面比較多的情況下，再使用基本路由，會導致大量的重複代碼，此時使用命名路由會非常方便

路由命名即給頁面起個名字，然後直接通過頁面名字即可打開該頁面

要通過名字來指定打開的頁面，必須先給應用程序 MaterialApp 提供一個頁面名稱映射規則，即路由表 routes

路由表實際上是一個 Map<String,WidgetBuilder>，其中 key 對應頁面名字，value 則是一個 WidgetBuilder 回調方法，我們需要在 WidgetBuilder 回調方法中創建對應的頁面。在路由表中定義好頁面名字後，就可以通過 Navigator.pushNamed 來打開頁面

如下代碼演示了命名路由的使用方法

首先定義一個路由集 Routes.dart

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

final String home = '/';
final String secondPage = '/SecondPage';
final String threePage = '/ThreePage';
final String fourPage = '/FourPage';

// 配置路由命名信息
final routes = {
  home: (context) => Home(),
  secondPage: (context) => Second(),
  threePage: (context) => Three(),
  fourPage: (context) => Four(),
};

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('跳轉錯誤'),
        centerTitle: true,
      ),
    );
  }
}

接着在 MyNameRouteApp 中註冊路由及錯誤頁面路由

class MyNameRouteApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      // 註冊路由
      routes: mRoutes.routes,
      onUnknownRoute: (RouteSettings setting) =>
          MaterialPageRoute(builder: (context) => mRoutes.UnknownPage()),
    );
  }
}

接下來，在第一頁中有個按鈕，點擊按鈕跳轉至第二頁

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.pushNamed(context, mRoutes.secondPage);
        },
        child: Text('下一頁'),
      ),
    );
  }
}

第二頁中也是按鈕，點擊後銷燬當前頁並跳轉至第三頁，並給第三頁傳值

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二頁'),
        centerTitle: true,
      ),
      body: Center(
        child: RaisedButton(
            onPressed: () {
              // 將當前頁面替換爲新頁面，即跳轉到新頁面後將當前頁面從堆棧中移除
              Navigator.pushReplacementNamed(context, mRoutes.threePage,
                  arguments: 'Android小白營');
            },
            child: Text('跳轉至下一頁，並移除當前頁')),
      ),
    );
  }
}

第三頁中有一個按鈕和兩個 Text，一個 Text 用於顯示第二頁傳過來的信息，一個 Text 用於顯示第四頁關閉時回傳過來的信息

class Three extends StatefulWidget {
  @override
  _ThreeState createState() => _ThreeState();
}

class _ThreeState extends State<Three> {
  String _msg = '';

  @override
  Widget build(BuildContext context) {
    String name = ModalRoute.of(context).settings.arguments as String;
    return Scaffold(
        appBar: AppBar(
          title: Text('第三頁'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  // 打開Four頁面，並監聽Four頁面關閉時傳遞的參數
                  Navigator.pushNamed(context, mRoutes.fourPage)
                      .then((msg) => setState(() => _msg = msg));
                },
                child: Text('打開頁面，並在頁面關閉時傳遞參數'),
              ),
              Text(name),
              Text(_msg)
            ],
          ),
//          child: Text(name),
        ));
  }
}

第四頁中有一個按鈕，用於關閉當前頁並向上一頁傳值

class Four extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: RaisedButton(
        onPressed: () {
          // 關閉頁面並傳遞參數
          Navigator.pop(context, '歡迎關注\"Android小白營\"');
        },
        child: Text('退出'),
      )),
    );
  }
}

其中 mRoutes 爲路由集 Routes.dart 的引用

import 'package:flutter_app_route/routes/Routes.dart' as mRoutes;

運行下代碼，效果如下

本文由博客一文多發平臺 OpenWrite 發佈！