我要评论正文
在 web/mobile 应用程序中，导航是一个很重要的特性，因为它允许你从一个页面跳转到另一个页面。
在 flutter 应用程序中，我们可以使用 push(), pop() 方法实现导航，或者编写我们自己的路由。
准备工作
我们假设 firstscreen 和 secondscreen 是两个不同的类，分别在各自的 firstscreen.dart 和 secondscreen.dart 文件内。
firstscreen.dart 文件如下：
import 'package:flutter/material.dart';
import 'package:navigation/secondscreen.dart';
class firstscreen extends statefulwidget {
@override
_firstscreenstate createstate() => _firstscreenstate();
}
class _firstscreenstate extends state<firstscreen> {
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text("first screen"),
),
body: column(
mainaxisalignment: mainaxisalignment.center,
children: <widget>[
text(
"hello to first screen",
style: textstyle(
fontsize: 20,
),
),
sizedbox(
height: 10,
),
center(
child: raisedbutton(
onpressed: () {},
child: text(
"first screen",
style: textstyle(
fontsize: 20,
fontweight: fontweight.bold
),
),
),
),
],
),
);
}
}
secondscreen.dart 文件如下：
import 'package:flutter/material.dart';
class secondscreen extends statefulwidget {
@override
_secondscreenstate createstate() => _secondscreenstate();
}
class _secondscreenstate extends state<secondscreen> {
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text("second screen"),
),
body: column(
mainaxisalignment: mainaxisalignment.center,
children: <widget>[
text(
"welcome on second screen",
style: textstyle(
fontsize: 20,
),
),
sizedbox(
height: 10,
),
center(
child: raisedbutton(
onpressed: () {},
child: text(
"second screen",
style: textstyle(
fontsize: 20,
fontweight: fontweight.bold
),
),
),
),
],
),
);
}
}
main.dart 的内容如下：
import 'package:flutter/material.dart';
import 'package:navigation/firstscreen.dart';
void main() {
runapp(materialapp(
home: firstscreen()));
}
第一种导航方式
我们可以使用 navigator.push() 方法和 navigator.pop() 方法进行页面/屏幕导航。
为了触发 raisedbutton 事件后从 firstscreen 导航到 secondscreen。我们需要在 firstscreen 的 build() 方法里面的 raisedbutton 中 onpressed(){} 添加如下的事件：
onpressed: () {
navigator.push(context, materialpageroute(builder: (context) => secondscreen()));
},
navigator.push() 方法将给定的路由推送到路由栈中，这个路由是由 navigator 类来维护。
现在，我们可以使用 materialpageroute路由 或者我们可以创建自己的路由。
将一个新的路由添加到栈中，我们可以通过一个 builder 函数创建一个 materialpageroute 的实例。builder 函数可以创建我们想在页面中展示的挂件。
(context) => secondscreen() 指向 secondsreen 上下文。
为了通过 raisedbutton 点击事件，从 secondscreen 返回到 firstscreen 页面：我们需要在 secondscreen 页面中添加如下的内容：
onpressed: () {
navigator.pop(context);
}
这里的 pop() 方法是将导航栈中最新的路由弹出。
第二种导航方式
通过 materialapp 构造函数额外提供的属性：initialroute 和 routes。
import 'package:flutter/material.dart'
import 'package:navigation/firstscreen.dart'
import 'package:navigation/secondscreen.dart'
void main() {
runapp(materialapp(
initialroute: '/firstscreen',
routes: {
'/firstscreen': (context) => firstscreen(),
'/secondscreen': (context) => secondscreen(),
},
home: firstscreen(),
));
}
initialroute 属性定义应用应该从哪个路由开始。routes 属性定义有哪些路由是可以获取的，且路由导航到哪些挂件。
这里，当路由导航到 /firstscreen 时，firstscreen 挂件将构建。
现在，我们将 firstscreen 的 onpressed(){} 的方法更改如下：
onpressed: () {
navigator.pushnamed(context, '/secondscreen');
}
这里使用命名路由 navigator.pushnamed() 导航到第一个页面。
在 secondscreen 的 onpressed(){} 事件中，还是保留使用 navigator.pop() 方法：
onpressed: () {
navigator.pop(context);
}
以上就是flutter使用push pop方法及路由进行导航详解的详细内容，更多关于flutter push pop方法路由导航的资料请关注代码网其它相关文章！
发表评论