一、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. ORM框架——Dapper

    1.什么是ORM ORM(Object Relational Mapping)对象关系映射,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术,用于实现面向对象编程语言里不同类型系统的数据之 ...

  2. windows的lib与dll

    mingw编译出来的动态库的导入库可以直接在vc中直接使用 静态库 lib .a 动态库 dll动态库导入库 lib .dll.a 静态链接库a) 静态链接库的类和函数不需要导出,就能够被其他库调用. ...

  3. 数据类型之字符串(string)(二)

    1.字符串索引 name = "Liu Dehua" print(name[0]) 返回结果: 'L' 注意:索引从0开始. 2.反索引--通过字符找位置 name.index(& ...

  4. 深入理解JVM - 自动内存管理

    对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们既是拥有最高权力的"皇帝",又是从事最基础工作的劳动人民--既拥有每一个对象的"所有权",又担负着 ...

  5. ES搜索- term与match区别&bool查询

    term属于精确匹配,只能查单个词,tems可以匹配多个词(满足其中之一词的都会被搜索出来),多个词如果要同时匹配使用bool的must(must中带多个term): match进行搜索的时候,会先进 ...

  6. having对聚合函数的结果集进行过滤

    SELECT rl.road_code,string_agg(distinct rs.tech_level_label, ',') from road_lst rlleft join road_sec ...

  7. Qt5.6使用Qt自带虚拟键盘

    Qt自带虚拟键盘是5.7版本以上才有,要在Qt5.6上使用自带虚拟键盘需要先下载源码,再进行编译安装.上网查了一些资料都很有用. https://doc.qt.io/qt-5/qtvirtualkey ...

  8. Mybatis 中传入List实现 批量插入、批量更新、批量删除

    1. 批量插入: Mapper层: int insertList(List<UsersModel> list); 对应的mapper.xml: <!--批量插入信息--> &l ...

  9. 题解 UVA10859 【Placing Lampposts】

    交了N次,重构一次代码终于过了..... 题意:一片森林,1.输出占领所有边需要的最小的路灯个数 2.输出两端点均被占领的边的条数 3.只有一端被占领的边的条数 还是比较简单的 开始的时候思路不够清晰 ...

  10. [iOS]获取地理位置信息

    1.在工程的 info.plist 文件中增加两个key( 右键 - Add Row ) Privacy - Location Always and When In Use Usage Descrip ...