flutter routes跳转

flutter可以通过push pop跳转到上一级或者下一级
基本push跳转方法此时仍然有返回按钮

Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => HomePage(),
        ));

跳转到其他下一级页面没有返回按钮

   return Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => HomePage(),
        ));

如果需要转到指定页面，或者跳转到根控制器，通过简单的push是无法实现，这个时候，可以通过routes跳转的方式实现

实现rotues也很简单实现以下2步即可

定义routes.dart

import 'package:flutter/material.dart';
//引入文件
import 'tabbar.dart';
import 'module/login.dart';
import 'module/home.dart';
import 'module/mine.dart';
import 'module/bank.dart';
import 'module/card.dart';
import 'module/contactkefu.dart';
import 'module/evaluation.dart';
import 'module/order.dart';
import 'module/wallet.dart';

//配置路由规则
final routes = {
        //Map<String, WidgetBuilder>
        "/tabbar": (context) => Tabbar(),
        "/home": (context) => HomePage(),
        "/login": (context) => LoginPage(),
        "/mine": (context) => MinePage(),
        "/bank": (context) => BankCardPage(),
        "/card": (context) => CardSubmit(),
        "/kefu": (context) => ContactKefu(),
        "/order": (context) => OrderPage(),
        "/evaluation": (context) => Edevaluation(),
        "/wallet": (context) => Wallet(),
        '/pagetest': (context,{arguments}) => PageTest(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;
    }
  }
};

2.在MaterialApp初始化路由

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',  //配置默认访问路径
      onGenerateRoute:onGenerateRoute,  //必须加上这一行，固定写法
      theme: new ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.white,
      ),
      home: Tabbar(),
    );
  }
}

这样就可以通过下面这种方式跳转到指定页面

Navigator.of(context).pushNamed('/home');

通过上面自定义路由的方式push控制器的时候如果需要传递参数也是可以实现的arguments是map类型

routes.dart中 配置         
'/pagetest': (context,{arguments}) => PageTest(arguments:arguments),  

传递参数方法
Navigator.pushNamed(context, "/pagetest",arguments: {
          "id":102
        })

如果跳转到指定页面并且移除栈中所有控制器

Navigator.of(context).pushNamedAndRemoveUntil('/home', (Route<dynamic> route) => false);

猜你喜欢