Flutter基础之Navigate教程(含demo)
Flutter基础之Navigate教程
【Flutter基础之Navigate教程(含demo)】大部分app都包含多个页面来显示信息。例如，一个app用一页屏幕来显示商品信息。用户可以通过点击商品图片显示一个详情页来获得更多信息。
专业用语： 在Flutter里面，屏幕和页面统称为routes。在Android里，一个route相当于一个Activity。
在iOS里，一个route等于一个ViewController。
在Flutter里，一个route仅仅是一个widget。
介绍 下面将介绍一下如何在俩个routes之间进行导航，共三步：
- 创建两个routes
- 使用Navigator.push()从第一页面导航到第二个
- 通过Navigator.pop() 从第二个页面返回第一个
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: RaisedButton(
child: Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
);
}
}class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai）
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 生活随笔｜好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息