![知识共享许可协议](https://csdnimg.cn/release/phoenix/images/creativecommons/80x15.png)
前言:导航的使用在任何程序里都至关重要,这也是一个程序的灵魂。那这里我们就介绍学习导航的知识。
知识点:
一、RaisedButton按钮组件
它有两个最基本的属性:
- child:可以放入容器,图标,文字。让你构建多彩的按钮。
- onPressed:点击事件的相应,一般会调用
Navigator
组件。
我们在作页面导航时,大量的使用了RaisedButton
组件,这个组件的使用在实际工作中用的也比较多。
二、Navigator.push 和 Navigator.pop
-
Navigator.push
:是跳转到下一个页面,它要接受两个参数一个是上下文context
,另一个是要跳转的函数。 -
Navigator.pop
:是返回到上一个页面,使用时传递一个context(上下文)参数,使用时要注意的是,你必须是有上级页面的,也就是说上级页面使用了Navigator.push
。
三、实现一个demo
功能:我们现在就来作一个简单的案例,我们打开一个页面,页面上只有一个简单的按钮,按钮写着“查看商品详情页面”,然后点击后进入下一个页面,页面有一个按钮,可以直接返回。
源码如下:
import 'package:flutter/material.dart';
//主函数(入口函数)
void main() {
runApp(MaterialApp(
title: '导航演示',
home: new FristScreen(),
));
}
class FristScreen extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title:Text('导航界面')),
body: Center(
child: RaisedButton(
child: Text('导航到详情页'),
onPressed: (){
Navigator.push(context, new MaterialPageRoute(
builder: (context)=>new SecondScreen()
));
},
),
),
);
}
}
class SecondScreen extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title:Text('导航到详情页')),
body: Center(
child: RaisedButton(
child: Text('返回上一页'),
onPressed: (){
Navigator.pop(context);
},
),
),
);
}
}
运行效果: