标签：按钮 完整 port 思路 跳转 显示 参数 ESS 含义
一 .概念
路由概念在前端大部分的含义都是一致的,通俗来说就是页面的跳转.如我们点击一个按钮,就可以跳转到对应的页面.
在flutter之中,为我们内置了一个路由管理器,我们通过这个路由管理器实现我们的路由管理.
在flutter之中,为我们提供了两种路由方式,一种是普通路由,另外一种就是命名路由.
二 .普通路由
我们首先实现一个这样的功能,点击页面上的按钮,让页面跳转到对应的页面.
import ‘package:flutter/material.dart‘;
import ‘./homePage.dart‘;
void main() => runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("title"),
),
body: MyApp(),
),
));
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: RaisedButton(
child: Text("跳转到home页面"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return HomePage();
}));
},
),
),
);
}
}
我们在页面上定义了一个按钮,这个按钮点击之后的作用就是帮助跳转到另外的一个组件(页面上).
在这里,我们需要注意的就是红色部分的路由代码.此外,我们还需要注意,跳转到的页面也需要是一个完整的页面内容(metarial页面,否则页面的整体效果无法显示).
下面是homePage的内容.
import ‘package:flutter/material.dart‘;
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("home apge"),
),
body: Container(
width: 100,
height: 100,
child: Text(
"我是一个home page",
textDirection: TextDirection.ltr,
),
),
),
);
}
}
三 .普通路由传递参数
我们在发生页面跳转的时候,常常会传递参数,我们这次来演示一下普通路由参数传递的内容.
我们首先说明一下整体的思路,说明白之后,我们就可以非常简单的进行操作了.
我们知道每一个Widget都存在构造函数,我们实际进行页面跳转的时候也是使用对应的构造函数.
我们通过构造函数就可以完成对应参数的传递了.
RaisedButton(
child: Text("普通路由传递参数"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context){
return FormPage(13);
},
));
},
)
在上面的代码之中,我们这次跳转的页面使用了有参数的构造函数,这样我们跳转的页面就可以获取对应的参数信息了.
class FormPage extends StatelessWidget {
final int id;
const FormPage(this.id,{Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
home: Scaffold(
appBar: AppBar(
title : Text("form 页面")
),
body: Center(
child: Text("我从之前的页面获取id=$id"),
),
),
),
);
}
}
我们看看对应的FormPage的内容,我们这里的构造函数(红色部分的内容,这样我们就可以非常容易的获取传递过来的参数了).
四 .怎么定义路由的返回.
在路由之中,我们存在一个函数就是pop(),实际上我们的路由就是一个栈结构,我们可以通过pop()和push()完成对应的功能的实现.
标签：按钮 完整 port 思路 跳转 显示 参数 ESS 含义
原文地址：https://www.cnblogs.com/trekxu/p/12238696.html
