管理多个页面时有两个核心概念和类:Route 和 Navigator。
- Route 是一个屏幕或页面的抽象
- Navigator 是管理 Route 的 Widget。Navigator 通过 Route 入栈和出栈来实现页面之间的跳转。
两个页面间跳转
在 02 - 首个应用 和 03 - Widget 框架 中已经用到过。
假设已有两个页面 Widget:FirstScreen,SecondScreen。Navigator.push
添加页面,Navigator.pop
弹出页面。
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: FirstScreen(),
));
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Launch screen'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
一个参数和两个参数的 push 是一样的。
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
}
pop 就是把自己从栈中移除。
传递数据
就是通过可选命名参数传到构造方法里面。
class SecondScreen extends StatelessWidget {
final String title;
final String content;
// 构造方法接收两个参数
SecondScreen({Key key, @required this.title, @required this.content}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text(content),
),
),
);
}
}
然后 FirstScreen 跳转时使用 SecondScreen(title: "标题", content: "内容")
。
网友评论