Flutter路由

最新推荐文章于 2024-07-25 15:44:34 发布
最新推荐文章于 2024-07-25 15:44:34 发布
阅读量1.3k 收藏 1
点赞数 2
分类专栏： Flutter 文章标签： flutter android dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46527751/article/details/122514210
版权

Flutter路由

路由

在flutter中，路由就是页面之间的跳转。在 Flutter 中通过 Navigator 组件管理路由导航。并提供了管理堆栈的方法。如：Navigator.push 和 Navigator.pop
Flutter 中给我们提供了两种配置路由跳转的方式：

  1. 基本路由
  2. 命名路由

基本路由的使用

主要方法

Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
//需要转跳的界面，传值的话可以在这里写，然后再另一个页面写构造函数来接收
return SearchPage();
}
)
);

主界面

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables, avoid_print

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/SearchPage.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (BuildContext context) {
              return SearchPage("搜索界面搜索界面");
            }));
          },
          child: Text("点击转跳")),
    );
  }
}


import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  String s;

  SearchPage(this.s,{Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: Text(s),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

在这里插入图片描述
页面转跳自带返回箭头的问题参考这篇文章

命名路由

在MaterialApp的routes下配置

routes: {
        '/search': (context) => SearchPage('搜索界面搜索界面111'),
        '/form': (context) => FormPage(),
      },

主页面

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables, avoid_print

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/SearchPage.dart';
import 'package:flutterapp/pages/FormPage.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/search': (context) => SearchPage('搜索界面搜索界面111'),
        '/form': (context) => FormPage(),
      },
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/search');
          },
          child: Text("点击转跳")),
    );
  }
}

SearchPage

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  String s;

  SearchPage(this.s, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: Column(
          children: [
            Text(s),
            Center(
              child: ElevatedButton(
                  onPressed: () {
                  //  Navigator.pushNamed(context, '/form');
                  },
                  child: Text("点击转跳")),
            ),
          ],
        ),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

FormPage

import 'package:flutter/material.dart';

class FormPage extends StatefulWidget {
  FormPage({Key? key}) : super(key: key);

  @override
  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar: AppBar(
          title: Text("表单页面"),
        ),
        body: Text("表单页面"),
    );
  }
}

这里只放Form页面截图
在这里插入图片描述

命名路由传值

定义route

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

在MaterialApp中添加

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;
          }
        }
      },

主界面

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables, avoid_print

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/SearchPage.dart';
import 'package:flutterapp/pages/FormPage.dart';

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

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

  MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      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;
          }
        }
      },
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/search',arguments: {"id":123});
          },
          child: Text("点击转跳")),
    );
  }
}

传值界面

// ignore_for_file: prefer_typing_uninitialized_variables

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  final arguments;

  const SearchPage({Key? key, this.arguments}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('搜索界面'),
        ),
        body: Column(
          children: [
            Text("获取到的内容为${arguments!=null?  arguments['id']:'0'}"),
            Center(
              child: ElevatedButton(
                  onPressed: () {
                    //  Navigator.pushNamed(context, '/form');
                  },
                  child: const Text("点击转跳")),
            ),
          ],
        ),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

也可以把onGenerateRoute抽离成一个文件

// ignore_for_file: prefer_function_declarations_over_variables

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/SearchPage.dart';
import 'package:flutterapp/pages/FormPage.dart';

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

   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的MaterialApp中onGenerateRoute: onGenerateRoute调用即可
在这里插入图片描述

返回上一页面

Navigator.of(context).pop();

路由替换

当我们由主页面A转跳到B，再由B转跳到C，那我们直接在C页面返回时会到B页面，要想直接返回A页面，就可以使用路由替换，即B转跳C时是直接用C替换B，相当于栈中还是只有两个页面。

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

route.dart

// ignore_for_file: prefer_function_declarations_over_variables

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/Login.dart';
import 'package:flutterapp/pages/SearchPage.dart';
import 'package:flutterapp/pages/FormPage.dart';
import '../pages/Login.dart';
import '../pages/RegisterFirst.dart';
import '../pages/RegisterSecond.dart';

  final routes = {
    '/search': (context,{arguments}) => SearchPage(arguments:arguments),
    '/form': (context) => FormPage(),
    '/login':(context) =>LoginPage(),
    '/registerone':(context)=>RegisterFirstPage(),
    '/registertwo':(context)=>RegisterSecondPage(),
  };

   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;
          }
        }
      };

主页面

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables, avoid_print

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/SearchPage.dart';
import 'package:flutterapp/pages/FormPage.dart';
import 'routes/Routes.dart';
void main() {
  runApp(MyApp());
}

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

  MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
     onGenerateRoute: onGenerateRoute,
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(
      child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/login');
          },
          child: Text("登录")),
    ),
    Center(
      child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/registerone');
          },
          child: Text("注册")),
    )
      ],
    );
  }
}

登录

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录界面'),
      ),
      body: Column(
        children: [
          Text("登录界面"),
          ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('登录'))
        ],
      ),
    );
  }
}

注册页面1

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

class RegisterFirstPage extends StatelessWidget {
  const RegisterFirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('注册页面1'),
      ),
      body: Column(
        children: [
          Text("验证登录"),
          ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushReplacementNamed('/registertwo');
              },
              child: Text('下一步'))
        ],
      ),
    );
  }
}

注册页面2

// ignore_for_file: prefer_const_constructors, unnecessary_new, unnecessary_null_comparison

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

class RegisterSecondPage extends StatelessWidget {
  const RegisterSecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('注册页面2'),
      ),
      body: Column(
        children: [
          Text("完成注册"),
          ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushAndRemoveUntil(
                    new MaterialPageRoute(
                        builder: (context) => new MyApp()),
                    (route) => route == null);
              },
              child: Text('确定'))
        ],
      ),
    );
  }
}

返回根路由

直接清除前面所有页面，然后重新指定转跳页面

Navigator.of(context).pushAndRemoveUntil(
                    new MaterialPageRoute(
                        builder: (context) => new MyApp()),
                    (route) => route == null);
s－010101
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter路由框架Fluro使用简介
08-25
Flutter路由框架Fluro使用简介 Flutter路由框架Fluro是Flutter应用开发中的一种优秀的路由管理解决方案，提供了灵活、可扩展、易于管理的路由管理机制。下面是对Flutter路由框架Fluro的使用简介： 一、Fluro的优点...
Flutter路由的跳转、动画和传参详解（最简单）
01-05
路由 做Android/iOS原生开发的时候，要打开一个新的页面，你得知道你的目标页面对象，然后初始化一个...Flutter路由介绍 Flutter里面有路由支持所有的路由场景，push、pop页面，页面间的参数传递等等。flutter里
Flutter 路由
github_36850997的博客
04-12 926
在Flutter 中，路由管理主要有两个类Route和Navigator。
Flutter 路由管理
xiangxiongfly
10-28 1548
出栈 maybePop() 方法只会在路由堆栈有可弹路由时才会出栈。 canPop() 方法可以判断当前路由堆栈是否可以出栈。 pushReplacement() 方法可以用于切换路由页面。 pushAndRemoveUntil() 进入新页面并之前所有页面。 命名路由 命名路由指有名字的路由，通过给路由起名字，通过路由名直接打开新的页面，便于路由管理。使用命名路由，必须先注册一个路由表，在MyApp类中添加属性。方式一 方式二首页home路由使用命名路由，需要在中注册MyHomePage路由，然后在声明
flutter路由跳转
q7410p123的博客
03-25 562
/路由跳转(模块方式)Navigator.pushNamed(context, "/") //路由跳转(路由方式)Navigator.pop(context)//返回上级路由对象 widget获取/使用路由参数 (widget.id / widget.title) 使用${widget.title}
Flutter路由守卫拦截
WEB前端李志杰
04-18 1803
Flutter路由守卫实现及需要注意的点。
Flutter路由及传参
我的博客
12-01 5515
前言 一个APP往往是由很多个页面组成的，单独的一个页面在安卓里面称为Activity，IOS称为ViewController，在Flutter里面仅仅是一个Widget。本文讲解Flutter的路由，Flutter内的路由组件有Navigator 和Router 。简单的可以用Navigator，更复杂的可以用Router。主要学习两个页面之间的跳转和传参，以及跨屏动画。 简单路由 在Flutter中，Navigator维护了一个堆栈，用来管理页面路由。可以通过Navigator.push()和Navig
flutter 路由封装
m0_62005319的博客
12-14 2180
import 'dart:convert'; import 'package:ecoyia_zgs/business/college/college_page.dart'; import 'package:ecoyia_zgs/business/column/big_brand/big_brand_page.dart'; import 'package:ecoyia_zgs/business/column/high_commission/high_commission_page.dart'; i
Flutter路由传参
前端入门
08-16 1178
Flutter路由传参1、普通路由 1、普通路由 //main.dart routes: routes,
Flutter系列-flutter路由管理
路漫漫其修远兮，吾将上下而求索
10-20 6574
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.MaterialPageRoute1.3.Navigator1.4.路由传值1.5 命名路由1.6.命名路由参数传递1.7.适配二、路由钩子三、onUnknownRoute四、结尾 初识路由概念 路由的概念由来已久，包括网络路由、后端路由，到现在广为流行的前端路由。无论路由的概念如何应用，它的核心是一个路由映射表。比如：名字 detail 映射到 DetailPage 页面等。有了这个映射表之后，我们就可以方便的根据名字来完成路由的转发
《深入浅出Dart》Flutter路由管理
linwu的博客
07-02 385
在本篇文章中，我们将深入探讨Flutter中的路由管理，使用最新的Dart语法和Flutter框架。路由管理是构建应用程序导航和页面跳转的关键部分，它可以帮助我们实现复杂的导航结构和页面切换效果。让我们详细了解Flutter中的路由管理和一些常用的组件。
flutter 路由跳转的实现示例
08-24
在Flutter开发中，路由（Routing）管理是应用中不可或缺的一部分，它允许你在不同的屏幕之间进行导航。本篇文章将深入探讨Flutter中的路由跳转及其实现示例，包括静态路由和动态路由，以及如何传递参数。 首先，...
Flutter常用命令
我叫柱子哥
07-22 822
CocoaPods 是 iOS 和 macOS 项目中常用的依赖管理工具。它的实现原理涉及依赖解析、Podspec 处理、Xcode 项目集成等多个方面。下面将详细讲解 CocoaPods 的实现原理。
懒人精灵安卓版纯本地离线文字识别插件
YY007H的博客
07-25 1601
相对来说，在懒人精灵进行插件开发还是比较困难的，需要会原生安卓开发，本地识别全屏会相对较慢，区域识别还是非常快，相比部署在服务器上，还可以减少了很多资源占用情况，更加方便便捷。目前懒人精灵推出的普通版和高级版，对应的文字识别插件也分普通版和高级版。找字，返回传入字的中心点坐标，方便进行点击，找不到字时，返回[-1,-1]"cht"：繁体，"japan"：日语，"korean"：韩语。1、打开懒人精灵，新建项目，双击资源.rc文件，添加文字识别插件。设置返回类型，默认"json"，包含得分、坐标和文字；
【Web】LitCTF 2024 题解(全)
最新发布
uuzeray的博客
07-25 540
file:///flag直接读本地文件。参考ctfshow web57。访问./dollar.php。以xml形式传数据，打xxe。{{7*7}}测出SSTI。随便找个payload打了。随便试一试，一眼ssrf。目录穿越拿到flag。
堆的基本实现
zc331的博客
07-25 501
在提出堆的概念之前，首先要了解二叉树的基本概念一颗二叉树是节点的有限集合，该集合：1、或者为空；2、或者由一个根节点加上两颗分别称为左子树和右子树的两颗子树构成；堆就是一颗完全二叉树；堆有两种：小堆和大堆堆在内存上的存储是数组形式的（物理结构）；我们认为想象成链式结构（逻辑结构）通过数组结构去实际存储，有这样的规律：每个父节点的下标乘以2加1就是左孩子节点，加2就是右孩子节点；无论是左孩子还是右孩子，其下标减去1再 /2 就是父节点的下标，这就是通过数组存储堆（完全二叉树）的优点。
【Android】广播机制
2301_79977698的博客
07-24 892
在Android中，广播（Broadcast）是一种消息，任何应用程序都可以发送广播消息，任何应用程序也都可以接收广播消息。广播通常用于通知应用程序某些事件的发生，比如系统启动、电量低、网络状态改变等。Broadcast Receiver（广播接收器）：用于接收广播消息并响应这些消息的组件。Intent（意图）：用于传递广播消息的数据结构。标准广播（Normal Broadcast）是完全异步的，所有接收器几乎同时接收广播，并且接收顺序是不确定的。
文件包涵条件竞争（ctfshow82）
m0_74402888的博客
07-24 559
添加cookie，清除参数。修改url地址，修改命令。
flutter路由封装
07-28
通过这种方式，我们可以实现对Flutter路由的封装。\[1\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [Flutter 封装fluro路由框架,提供路由,实现父子页面信息互传等功能]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值