Flutter基础知识-路由篇

简介

在Flutter中通过Navigator组件管理路由导航
Navigator中提供了管理堆栈的方法。如：Navigator.push()和Navigator.pop()

Navigator

普通路由跳转

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (BuildContext context){
      return SearchPage();
    }
  )
);
Navigator.of(context).push(
  MaterialPageRoute(
    builder: (BuildContext context){
      return SearchPage(title: "表单");
    }
  )
);

命名路由跳转

Navigator.pushNamed(context, '/search');
Navigator.pushNamed(context, '/search', arguments: {
  "id": 123
});

命名路由替换

Navigator.of(context).pushReplacementNamed('/search');

后退

Navigator.of(context).pop();

返回到根路由

Navigator.of(context).pushAndRemoveUntil(
  new MaterialPageRoute(builder: (context) => new Tabs(index: 2)), 
  (route) => route == null
);

普通路由

路由跳转

比如从HomePage组件跳转到SearchPage组件

在HomPage中引入SearchPage.dart

import '../SearchPage.dart';

在HomePage中通过下面方法跳转

RaisedButton(
  child: Text("跳转到搜索页面"),
  color: Theme.of(context).accentColor,
  textTheme: ButtonTextTheme.primary,
  onPressed: (){
    // 路由跳转
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (BuildContext context){
          return SearchPage();
        }
      )
    );
  },
)

跳转传值

在HomePage中跳转时传参

RaisedButton(
  child: Text("跳转到搜索页面"),
  color: Theme.of(context).accentColor,
  textTheme: ButtonTextTheme.primary,
  onPressed: (){
    // 路由跳转
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (BuildContext context){
          return SearchPage(title: "表单");
        }
      )
    );
  },
)

在SearchPage中接收参数

class FormPage extends StatelessWidget {
  String title;
  FormPage({ this.title = "搜索页面" });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Text("搜索");
  }
}

命名路由

配置路由

给MaterialApp组件配置routes

import 'pages/Form.dart';
import 'pages/Search.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      // 这么做的命名路由，没法传参
      routes: {
        '/form': (context) => FormPage(),
        '/search': (context) => SearchPage(),
      },
    );
  }
}

路由跳转

RaisedButton(
  child: Text("跳转到搜索页面"),
  color: Theme.of(context).accentColor,
  textTheme: ButtonTextTheme.primary,
  onPressed: (){
    Navigator.pushNamed(context, '/search');
  },
)

跳转传值

参考https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

修改MaterialApp组件，去掉routes配置，添加onGenerateRoute配置

import 'pages/Tabs.dart';
import 'pages/Form.dart';
import 'pages/Search.dart';

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

class MyApp extends StatelessWidget {
  final routes = {
    '/form': (context) => FormPage(),
    '/search': (context, { arguments }) => SearchPage(arguments: arguments),
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      // 这么做的命名路由，没法传参
      // routes: {
      //   '/form': (context) => FormPage(),
      //   '/search': (context) => SearchPage(),
      // },
      // 为了路由传参，这么做
      onGenerateRoute: (RouteSettings settings){
        // 统一处理
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
              builder: (context) => pageContentBuilder(context, arguments: settings.arguments)
            );
            return route;
          } else {
            final Route route = MaterialPageRoute(
              builder: (context) => pageContentBuilder(context)
            );
            return route;
          }
        }
      },
    );
  }
}

在HomePage中跳转时传参

RaisedButton(
  child: Text("跳转到搜索页面并传值"),
  onPressed: (){
    Navigator.pushNamed(context, '/search', arguments: {
      "id": 123
    });
  },
  color: Theme.of(context).accentColor,
  textTheme: ButtonTextTheme.primary,
)

在SearchPage中接收参数

class SearchPage extends StatelessWidget {
  final arguments;
  SearchPage({ this.arguments });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("搜索页面"),
      ),
      body: Text("搜索页面内容区域${arguments != null ? arguments['id'] : '0'}")
    );
  }
}

优化

平时项目中，推荐使用命名路由

将onGenerateRoute抽离出来，形成一个单独的路由配置文件，方便统一管理

在lib/目录下新建Routes.dart

import 'package:flutter/material.dart';

import './pages/Tabs.dart';
import './pages/Form.dart';
import './pages/Search.dart';
import './pages/Product.dart';
import './pages/ProductInfo.dart';

// 配置路由
final routes = {
  '/': (context) => Tabs(),
  '/form': (context) => FormPage(),
  '/search': (context, { arguments }) => SearchPage(arguments: arguments),
  '/product': (context) => ProductPage(),
  '/productinfo': (context, { arguments }) => ProductInfoPage(arguments: arguments),
};

// 固定写法
var onGenerateRoute = (RouteSettings settings){
  // 统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context, arguments: settings.arguments)
      );
      return route;
    } else {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context)
      );
      return route;
    }
  }
};

修改lib/main.dart文件，引入Routes

import 'package:flutter/material.dart';

import './Routes.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 初始化的时候加载的路由
      initialRoute: '/',
      // 为了路由传参，这么做
      onGenerateRoute: onGenerateRoute,
    );
  }
}