Flutter跳转到下一页面并返回这是移动应用必须掌握的技能,我们可以使用Flutter Navigator来实现两个页面之间的跳转,下面先来看实现步骤。
学习路线
创建两个Flutter页面,FirstScreen与SecondScreen
使用 Navigator.push()方法导航到下一界面
使用 Navigator.pop()方法返回到上一个界面
点击“Launch screen”按钮跳转到下一界面,点击“Go back!”按钮返回上一页,代码如下:
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!'), ), ), ); } }
Flutter跳转到下一个界面的效果如下: