Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法。
常用的方法如下:
1. Navigator.push 跳转到指定页面;
2. Navigator.pop 返回上一级页面;
跳转代码示例:
import "package:flutter/material.dart";
// 引入要跳转到的子页面
import '../Form.dart';
// 定义一个有状态组件
class CategoryPage extends StatefulWidget {
CategoryPage({Key key}) : super(key: key);
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return Column(
// 主轴对齐式式
mainAxisAlignment:MainAxisAlignment.center,
// 交叉轴对齐方式
crossAxisAlignment: CrossAxisAlignment.center,
children:<Widget>[
RaisedButton(
child: Text("跳转到表单页面并传值"),
// 点击事件
onPressed: () {
// 路由约定俗成的写法,返回要跳转到的组件即可;
Navigator.of(context).push(
// 在FormPage()里传入参数
MaterialPageRoute(builder: (context)=>FormPage(title:'我是跳转传值的页面'))
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
]
);
}
}
效果图如下:
要跳转到的子页面FormPage,并接受参数。
import 'package:flutter/material.dart';
// 表单子页面
class FormPage extends StatelessWidget {
String title;
// 在构造函数里接受其他页面的传参
FormPage({this.title="表单"});
@override
Widget build(BuildContext context) {
return Scaffold(
// 浮动按钮
floatingActionButton: FloatingActionButton(
child: Text('返回'),
// 点击事件
onPressed: (){
// 自定义返回上一级页面
Navigator.of(context).pop();
},
),
appBar: AppBar(
title:Text(this.title)
),
body: ListView(
children: <Widget>[
ListTile(
title:Text('这是表单页面')
),
ListTile(
title:Text('这是表单页面')
),
ListTile(
title:Text('这是表单页面')
),
ListTile(
title:Text('这是表单页面')
)
]
),
);
}
}
效果图如下:
页面跳转时,手机顶部导航条是有默认的返回按钮的,如果想自定义返回上一级页面,可以通过 Navigator.of(context).pop() 来返回上一级页面,详见上面子页面的代码。