一、Flutter 中的路由

Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navigator 组件管理路由导航。并提供了管理堆栈的方法。如:Navigator.push 和 Navigator.pop
Flutter 中给我们提供了两种配置路由跳转的方式:1、基本路由 2、命名路由
 
 
 

二、Flutter 中的基本路由使用

比如我们现在想从 HomePage 组件跳转到 SearchPage 组件。
1、需要在 HomPage 中引入 SearchPage.dart
import '../SearchPage.dart';
2、在 HomePage 中通过下面方法跳转
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
return SearchPage();
})
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)

四、Flutter 中的命名路由

1、配置路由
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home:Tabs(),
initialRoute: '/',
routes: {
'/':(contxt) => Tabs(),
'/search':(contxt) => SearchPage(),
'/form': (context) => FormPage(),
},
);
}
}
2、路由跳转
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.pushNamed(context, '/search');
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)

五、Flutter 中的命名路由跳转传值

官方文档:https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments
1、配置路由:
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final Map<String,Function> routes = {
'/': (contxt) => Tabs(),
'/search': (contxt) => SearchPage(),
'/form': (context, {arguments}) => FormPage(arguments: arguments),
}; @override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
onGenerateRoute: (RouteSettings settings) { // 统一处理
final String? name = settings.name;
final Function? pageContentBuilder = this.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、跳转传值
RaisedButton(
child: Text("跳转到表单演示页面"),
onPressed: (){
Navigator.pushNamed(context, '/form',arguments: {
"id":20
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
3、接收参数
 
import 'package:flutter/material.dart';
class FormPage extends StatelessWidget {
final Map arguments; FormPage({this.arguments});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("搜索"),
),
body:Text("我是一个表单页面 ${arguments != null ? arguments['id'] : '0'}")
);
}
}

六、Flutter 中的命名路单独抽离到一个文件

import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart'; //配置路由,定义 Map 类型的 routes,Key 为 String 类型,Value 为 Function 类型
final Map<String,Function> routes={
'/':(context)=>Tabs(),
'/form':(context)=>FormPage(),
'/product':(context)=>ProductPage(),
'/productinfo':(context,{arguments})=>ProductInfoPage(arguments:arguments),
'/search':(context,{arguments})=>SearchPage(arguments:arguments),
};
//固定写法
var onGenerateRoute=(RouteSettings settings) {
//String? 表示 name 为可空类型
final String? name = settings.name;
//Function? 表示 pageContentBuilder 为可空类型
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;
}
}
};
import 'package:flutter/material.dart';
import 'routes/Routes.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home:Tabs(),
initialRoute: '/',
onGenerateRoute: onGenerateRoute
);
}
}

Flutter 中的普通路由、普通路由传值、 命名路由、命名路由传值的更多相关文章

  1. Flutter 中的路由

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航. 并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.po ...

  2. Flutter 中的基本路由

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...

  3. Flutter中管理路由栈的方法和应用

    原文地址:https://www.jianshu.com/p/5df089d360e4 本文首先讲的Flutter中的路由,然后主要讲下Flutter中栈管理的几种方法. 了解下Route和Navig ...

  4. Flutter中的普通路由与命名路由(Navigator组件)

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航.并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...

  5. flutter中的路由跳转

    在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...

  6. flutter中的命名路由

    命名路由是区别于基本路由的一种存在,方便于大型项目中路由的统一管理,现在,在前面基本路由的项目基础上实现实现命名路由. 使用步骤 路由配置 命名路由在使用前,需要在根组件main.dart中进行简单的 ...

  7. 十四、 React路由(react-router4.x): 动态路由、get传值、React中使用url模块

    概述 新闻列表 -跳转-> 详情页 时,想把列表对应的id传到详情页里,可用到三种传值方法: 1.动态路由传值 2.get传值 3.localstorage传值 一.动态路由传值 [App.js ...

  8. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  9. ASP.NET Core 中文文档 第三章 原理(4)路由

    原文:Routing 作者:Ryan Nowak.Steve Smith. Rick Anderson 翻译:张仁建(Stoneqiu) 校对:许登洋(Seay).谢炀(kiler398).孟帅洋(书 ...

  10. flutter 中的AppBar

    在flutter中的很多页面中,都会有下面这段代码: 对应就是下图中的红色线框区域,被称作AppBar顶部导航. 项目准备 在使用AppBar之前,我们先新建一个tabBar的项目: 然后在pages ...

随机推荐

  1. cuda+pytorch环境安装

    本机cuda版本为v11.5 conda install cudatoolkit 使用 CUDA 11.3版本的配置 conda install pytorch==1.11.0 torchvision ...

  2. shiyansi

    #include <stdio.h> #include <stdlib.h> #define N 1000 int fun(int n,int m,int bb[N]) { i ...

  3. SAP 采购订单行项目客制化字段增强

    需求: 在采购订单行项目中新增客制化字段,区分采购的项目中的物料是量产还是研发物料 开发步骤 主要使用二代增强出口:MM06E005 创建增强项目 事务码T-code:CMOD 创建项目ZEMM001 ...

  4. c++ sizeof详解

    c语言详解sizeof   原文地址:http://blog.sina.com.cn/s/blog_5da08c340100bmwu.html 一.sizeof的概念   sizeof是C语言的一种单 ...

  5. 085_JS Promise

    js对undefined的处理  https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 ...

  6. lucene入门&Solr

    LUCENE 1. 学习计划 1.案例分析:什么是全文检索,如何实现全文检索 2.Lucene实现全文检索的流程 a) 创建索引 b) 查询索引 3.配置开发环境 4.创建索引库 5.查询索引库 6. ...

  7. HCIA-基础实验FIN-综合网络部署考核

    HCIA-基础实验FIN-综合网络部署考核 虽然我选择通过自学hcia并跳过hcia培训直接学习hcip, 但是这个基础实验课程的考核总归还是处理掉比较好, 趁现在能挤出时间(笑). 1 实验需求 1 ...

  8. RBAC(DAC)模型

    基于角色的访问控制模型 ⟨ , ,,, , , ,, ,⟩ U:用户集 S:会话集 O:资源集 Op:操作集 R:角色集 PERMS:OxOp:权限集 RH:RXR(是 的偏序,表示角色的层次结构,其 ...

  9. [洛谷/题目] P1562 还是N皇后

    声明 关于科学道理都会放进代码中,但是我们需要先了解一下位运算解这道题目的基础知识 我不是很会专业词语,所以仅介绍原理 位运算基础 众所周知,二进制是0和1 2^3 2^2 2^1 2^0 8 4 2 ...

  10. Mac下Homebrew更新国内源brew update卡死(完美解决,网上都不完整)

    https://blog.csdn.net/zz00008888/article/details/113880633