Flutter 中的路由

Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navigator 组件管理路由导航。

并提供了管理堆栈的方法。如:Navigator.push 和 Navigator.pop
Flutter 中给我们提供了两种配置路由跳转的方式:1、基本路由 2、命名路由

Flutter 中的基本路由使用

例如：

从 HomePage 组件跳转到 SearchPage 组件

1、需要在 HomPage 中引入 SearchPage.dart

import '../SearchPage.dart';

2、在 HomePage 中通过下面方法跳转

RaisedButton(

            child: Text("跳转到搜索页面"),

            onPressed: () {

              //路由跳转

              Navigator.of(context).push(

                MaterialPageRoute(

                  builder: (context)=>SearchPage()

                )

              );

            },

            color: Theme.of(context).accentColor,

            textTheme: ButtonTextTheme.primary

        ),

Flutter 中的基本路由跳转传值

import 'package:flutter/material.dart';

import '../Form.dart';

class CategoryPage extends StatefulWidget {

  CategoryPage({Key key}) : super(key: key);

  _CategoryPageState createState() => _CategoryPageState();

}

class _CategoryPageState extends State<CategoryPage> {

  @override

  Widget build(BuildContext context) {

    return Column(

      crossAxisAlignment: CrossAxisAlignment.start,

      mainAxisAlignment: MainAxisAlignment.center,

      children: <Widget>[

        RaisedButton(

          child: Text("跳转到表单页面"),

          onPressed: (){

            Navigator.of(context).push(

                MaterialPageRoute(

                  builder: (context)=>FormPage(title:'我是跳转传值')

                )

            );

          },

        )

      ],

    );

  }

}

Flutter 中的命名路由

1、配置路由

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';

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(),

      }

    );

  }

}

2、路由跳转

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {

  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  @override

  Widget build(BuildContext context) {

    return Column(

      crossAxisAlignment: CrossAxisAlignment.center,

      mainAxisAlignment: MainAxisAlignment.center,

      children: <Widget>[

        RaisedButton(

            child: Text("跳转到搜索页面"),

            onPressed: () {

              //路由跳转

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

            },

            color: Theme.of(context).accentColor,

            textTheme: ButtonTextTheme.primary

        ),

        SizedBox(height: 20),        

      ],

    );

  }

}

Flutter 中的命名路由跳转传值

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';

import 'pages/Search.dart';

import 'pages/Form.dart';

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

class MyApp extends StatelessWidget {

  final routes = {

    '/': (contxt) => Tabs(),

    '/search': (contxt) => SearchPage(),

    '/form': (context, {arguments}) => FormPage(arguments: arguments),

  };

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        home: Tabs(),

        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;

            }

          }

        });

  }

}

传值

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {

  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  @override

  Widget build(BuildContext context) {

    return Column(

      crossAxisAlignment: CrossAxisAlignment.center,

      mainAxisAlignment: MainAxisAlignment.center,

      children: <Widget>[

        RaisedButton(

            child: Text("跳转到搜索页面"),

            onPressed: () {

              //路由跳转

              Navigator.pushNamed(context, '/search',arguments: {

                "id":123

              });

            },

            color: Theme.of(context).accentColor,

            textTheme: ButtonTextTheme.primary

        ),

        SizedBox(height: 20),

         RaisedButton(

            child: Text("跳转到商品页面"),

            onPressed: () {

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

            }

        ),      

      ],

    );

  }

}

接收参数：

import 'package:flutter/material.dart';

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'}"),

    );

  }

}

Flutter 中的命名路单独抽离

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(),

      '/product':(context)=>ProductPage(),

      '/productinfo':(context,{arguments})=>ProductInfoPage(arguments:arguments),

      '/search':(context,{arguments})=>SearchPage(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;

        }

      }

};

main.dart

import 'package:flutter/material.dart';

import 'routes/Routes.dart';

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

class MyApp extends StatelessWidget {  

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      // home:Tabs(),

      initialRoute: '/',     //初始化的时候加载的路由

      onGenerateRoute: onGenerateRoute

    );

  }

}

官方文档:https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

Flutter 中返回到上一级页面

Navigator.of(context).pop();

Flutter 中替换路由

比如我们从用户中心页面跳转到了 registerFirst 页面，然后从 registerFirst 页面通过 pushReplacementNamed 跳转到了 registerSecond 页面。这个时候当我们点击 registerSecond 的返回按钮的时候它会直接返回到用户中心。

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

Flutter 返回到根路由

比如我们从用户中心跳转到 registerFirst 页面，然后从 registerFirst 页面跳转到 registerSecond 页面，然后从 registerSecond 跳转到了 registerThird 页面。这个时候我们想的是 registerThird 注册成功后返回到用户中心。这个时候就用到了返回到根路由的方法。

Navigator.of(context).pushAndRemoveUntil(

    new MaterialPageRoute(builder: (context) => new Tabs(index:1)),

);

巴特西

Flutter 中的路由

最新文章

热门文章