Flutter基本路由
Flutter中的路由通俗的讲就是,页面跳转在Flutter中通过Navigator组件管理导航。
并提供了管理堆栈的方法。如: Navigator.push 和Navigator.pop
Flutter中给我们提供了两种配置路由跳转的方式: 1,基本路由 2,命名路由
普通跳转
第一个页面
import 'package:flutter/material.dart';
import 'SecondPage.dart'; /// 引入我们的 SecondPage 页面,如果在一个 .dart 中写的可以不用写
void main() {
runApp(MaterialApp(
title: 'Flutter',
home: FistPage(),
));
}
/// 第一个页面
class FistPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("第一个页面"),
),
body: new Center(
child: new TextButton(
child: new Text("点击跳转"),
onPressed: () {
/// 跳转到新的页面我们需要调用 Navigator.push方法
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SecondPage()));
}),
),
);
}
}
第二个页面
import 'package:flutter/material.dart';
/// 第二个页面
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("第二个页面"),
),
body: new Center(
//onPressed 点击事件
child: new TextButton(
child: new Text("返回上一个页面"),
onPressed: () {
/// 关闭当前页面,返回上一个页面
Navigator.pop(context);
}),
),
);
}
}
效果
点击进入我们的 第二个页面
携带参数跳转
import 'package:flutter/material.dart';
import 'SecondPage.dart'; /// 引入我们的 SecondPage 页面,如果在一个 .dart 中写的可以不用写
void main() {
runApp(MaterialApp(
title: 'Flutter',
home: FistPage(),
));
}
/// 第一个页面
class FistPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("第一个页面"),
),
body: new Center(
child: Column(
children: [
TextButton(
child: new Text("点击跳转"),
onPressed: () {
/// 跳转到新的页面我们需要调用 Navigator.push方法
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SecondPage()));
}),
TextButton(
child: new Text("带参跳转"),
onPressed: () {
/// 跳转到新的页面我们需要调用 Navigator.push方法
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SecondPage(username: "afeng最帅",password: "123456",)));
}),
],
)
),
);
}
}
import 'package:flutter/material.dart';
/// 第二个页面
class SecondPage extends StatelessWidget {
String username,password;
SecondPage({this.username = "快点呀",this.password ="等的花都要谢啦"}); // 如果上一个页面没有传递参数我们设置一个默认值
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("第二个页面"),
),
body: new Center(
//onPressed 点击事件
child:Column(
children: [
Row(
children: [
Text("用户名:"),
Text(this.username)
],
),
Row(
children: [
Text("密码:"),
Text(this.password)
],
)
],
)
),
);
}
}
效果 没有传递参数时:
带参跳转
Flutter中文网
链接: 路由.
微语
朋友一定会越来越少,因为走着走着方向就不一致了,所以志同道合的人才能看得懂同一片风景。