Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法。如:Navigator.push 和 Navigator.pop。Flutter 中给我们提供了两种配置路由跳转的方式:1、基本路由 2、命名路由
项目准备
由于页面跳转需要有多个页面,所以在项目开始前,需要准备多个页面,这里是复用了前面导航项目,然后在pages文件夹下面添加Form.dart和Search.dart两个文件。
Search.dart
import 'package:flutter/material.dart'; class SearchPage extends StatelessWidget { const SearchPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar:AppBar( title: Text("搜索页面"), ) , body: Text("搜索页面内容区域"), ); } }
基本路由
首先实现基本的页面跳转:在HomPage中点击按钮,页面跳转到SearchPage。要完成上述过程,需要分三步
-
需要在 HomPage 中引入 SearchPage.dart
- 触发事件
- 页面跳转
import 'package:flutter/material.dart'; import '../Search.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 Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text("跳转到搜索页面"), onPressed: () { //路由跳转 Navigator.of(context).push( MaterialPageRoute( builder: (context)=>SearchPage() ) ); }, color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary ), SizedBox(height: 20), ], ); } }
基本路由跳转传值
上面仅仅是实现了页面跳转,但是在很多情况下,页面跳转时伴随着数据传递的,下面,实现从CategoryPage跳转到Form.dart页面,并且传递相关数据。
首先需要在CategoryPage页面中进行页面跳转时,写入需要传递的值
Category.dart
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( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text("跳转到表单页面"), onPressed: (){ Navigator.of(context).push( MaterialPageRoute( builder: (context)=>FormPage(title:'我是跳转传值') ) ); }, ) ], ); } }
然后在Form.dart中获取传递过来的值。
需要注意的是,这里在获取页面跳转传值时,不同的写法有着不同的作用:
这种写法代表title为可选传值,拥有默认值。
这种写法代表title为必传参数。
Form.dart
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('我是表单页面'), ) ], ), ); } }
上面的例子中,还在Form.dart中添加了一个返回路由的按钮。
代码下载:点这里(747f)