Flutter路由的几种用法小结_Android

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路由跳转内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

Flutter路由的几种用法小结

2024年05月18日 • Android •我要评论