zoukankan      html  css  js  c++  java
  • 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步即可

    1. 定义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);
    

    push到screen4并压入到screen1上 同时移除栈中screen1之前所有的页面

    Navigator.of(context).pushNamedAndRemoveUntil('/screen4',ModalRoute.withName('/screen1'));
    

    参考来源:

    https://zhuanlan.zhihu.com/p/56289929 Flutter中管理路由栈的方法和应用
    https://juejin.im/post/5d875dea5188253f9f39b54e Flutter 路由跳转及传值详解(Navigator的使用)

  • 相关阅读:
    log4net编译后命名空间找不到的问题
    网络流建模汇总
    零散知识点收集
    CentOS7中“ONBOOT”已设置为“yes”但开机后ens33不会自启动解决方案
    Hanoi塔问题
    Mosquitto用户名密码配置
    Activiti5 数据库表结构
    皮尔森相关系数(Pearson correlation coefficient)
    如何用研发流程搞垮一个团队?
    Java 编程规范
  • 原文地址:https://www.cnblogs.com/qqcc1388/p/11582632.html
Copyright © 2011-2022 走看看