Flutter路由的几种用法小结

 更新时间:2023年12月09日 10:00:18   作者:举儿  
这篇文章主要介绍了Flutter路由的几种用法,包括基本路由跳转和路由跳转传参方法,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

Flutter路由跳转

基本路由跳转 

ElevatedButton(
  onPressed: () {
    //基本路由跳转
    Navigator.of(context).push(
      MaterialPageRoute(builder: (BuildContext context) {
        return const SearchPage();
      }),
    );
  },
  child: const Text("基本路由跳转"),
),

search.dart页面

import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
  final String context;
  final int aid;
  const SearchPage({
    super.key,
    this.context = "",
    this.aid = 0,
  });
  @override
  State<SearchPage> createState() => _SearchPageStateState();
}
class _SearchPageStateState extends State<SearchPage> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //返回到上一页路由
          Navigator.pop(context);
        },
        child: const Icon(Icons.close),
      ),
      appBar: AppBar(
        title: const Text("搜索页面"),
      ),
      body: Center(
        child: Text(
          "${widget.context} "
          "${widget.aid == 0 ? "" : ",代号:${widget.aid}"}"
        ),
      ),
    );
  }
}

返回上一页路由

Navigator.pop(context);

基本路由跳转传参

ElevatedButton(
  onPressed: () {
    //基本路由跳转传参
    Navigator.of(context).push(
      MaterialPageRoute(builder: (BuildContext context) {
        return const SearchPage(
            context: "首页传过来的参数", aid: 123456);
      }),
    );
  },
  child: const Text("基本路由跳转传参"),
),

命名路由跳转

ElevatedButton(
  onPressed: () {
    //命名路由跳转
    Navigator.pushNamed(context, "/search");
  },
  child: const Text("命名路由跳转"),
),

命名路由跳转需要先配置路由

routers.dart配置文件

import 'package:flutter/material.dart';
import 'package:flutter_demo/form.dart';
import 'package:flutter_demo/register2.dart';
import 'package:flutter_demo/search.dart';
//配置路由
Map routes = {
  "/search": (context) => const SearchPage(),
  "/register2": (context) => const Register2(),
  "/form": (context, {arguments}) => FormPage(arguments: arguments),
};
//配置onGenerateRoute固定写法,这个方法相当于一个中间件,可以做权限判断
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;
    }
  }
  return null;
};

然后需要在首页添加initialRoute和onGenerateRoute配置

import 'package:flutter_demo/routers/routers.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //隐藏DEBUG图标
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Scaffold(
        body: MyHomePage(),
      ),
      initialRoute: "/",
      onGenerateRoute: onGenerateRoute,
    );
  }
}

命名路由跳转传参

ElevatedButton(
  onPressed: () {
    //命名路由传参
    Navigator.pushNamed(
      context,
      "/form",
      arguments: {
        "aid": 123456,
        "name": "张三",
        "age": "18",
      },
    );
  },
  child: const Text("命名路由传参"),
),

context属性中写配置中的路径,arguments属性中是跳转需要带的参数,跳转到form.dart页面并接收参数。

import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
  final Map arguments;
  const FormPage({
    super.key,
    required this.arguments,
  });
  @override
  State<FormPage> createState() => _FormPageStateState();
}
class _FormPageStateState extends State<FormPage> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("表单页面"),
      ),
      body: Center(
        child: Text(
          widget.arguments.isEmpty
              ? ""
              : "我是${widget.arguments["name"]},我${widget.arguments["age"]}了,"
                  "代号:${widget.arguments["aid"]}",
        ),
      ),
    );
  }
}

命名路由替换跳转

Navigator.of(context).pushReplacementNamed("/register2");

命名路由替换跳转用pushReplacementNamed,跳转新页面后本页面被替换掉。

移除所有页面返回到根页面

Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(builder: (BuildContext context) {
  return const MyApp();
}), (route) => false);

移除所有页面并返回到指定页面用pushAndRemoveUntil。

到此这篇关于Flutter路由的几种用法的文章就介绍到这了,更多相关Flutter路由跳转内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • Android动态权限申请详解

    Android动态权限申请详解

    大家是否还在为动态权限申请感到苦恼呢?传统的动态权限申请需要在Activity中重写onRequestPermissionsResult方法来接收用户权限授予的结果,本文介绍了如何简单的实现Android动态权限申请
    2023-04-04
  • Android Canvas的drawText()与文字居中方案详解

    Android Canvas的drawText()与文字居中方案详解

    这篇文章主要给大家介绍了关于Android Canvas的drawText()与文字居中方案的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • Android实现显示和隐藏密码功能的示例代码

    Android实现显示和隐藏密码功能的示例代码

    在前端中我们知道用javascript就可以可以很容易实现密码的显示与隐藏,本文将大家详细介绍Android是如何实现显示和隐藏密码功能的,需要的可以参考一下
    2022-06-06
  • Android 多种dialog的实现方法(推荐)

    Android 多种dialog的实现方法(推荐)

    下面小编就为大家分享一篇Android 多种dialog的实现方法(推荐),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Android端TCP长连接的性能优化教程分享

    Android端TCP长连接的性能优化教程分享

    在开发过程中,我们经常会用到TCP/IP连接实现即时数据传输,下面这篇文章主要给大家介绍了关于Android端TCP长连接的性能优化的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2018-03-03
  • 浅谈Android Studio如何Debug对应so文件C/C++代码

    浅谈Android Studio如何Debug对应so文件C/C++代码

    本篇文章主要介绍了浅谈Android Studio如何Debug对应so文件C/C++代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Android使用Item Swipemenulistview实现仿QQ侧滑删除功能

    Android使用Item Swipemenulistview实现仿QQ侧滑删除功能

    大家都用过QQ,肯定有人好奇QQ滑动删除Item的效果是怎样实现的,其实我们使用Swipemenulistview就可以简单的实现。这篇文章主要介绍了Android使用ItemSwipemenulistview实现仿QQ侧滑删除功能,需要的朋友可以参考下
    2017-02-02
  • RxJava2和Retrofit2封装教程(整洁、简单、实用)

    RxJava2和Retrofit2封装教程(整洁、简单、实用)

    这篇文章主要给大家介绍了关于RxJava2和Retrofit2封装的相关资料,文中通过示例代码介绍的非常详细,整洁、简单、实用,非常适合大家学习使用,需要的朋友可以参考下
    2018-11-11
  • android Bitmap圆角与倒影的具体实现代码

    android Bitmap圆角与倒影的具体实现代码

    android Bitmap圆角与倒影的具体实现代码,需要的朋友可以参考一下
    2013-06-06
  • Android Studio 如何删除/新建一个module(图文教程详解)

    Android Studio 如何删除/新建一个module(图文教程详解)

    这篇文章主要介绍了Android Studio 如何删除/新建一个module,此方法也会将该module从你的硬盘中删除,如果直接右键会发现没有delete选项,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友参考下吧
    2020-03-03

最新评论

?


http://www.vxiaotou.com