- Flutter实战指南
- 李楠
- 386字
- 2021-04-04 00:06:23
6.1 在App中添加多个页面
我们以一个简单的例子开始,首先需要创建多个页面,现在的App中只有一个页面,这个页面通过Scaffold创建,然后在Scaffold中再创建需要显示的所有内容,包括导航栏AppBar、导航栏下面的内容body。代码如下:
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P82_11836.jpg?sign=1739400095-mFkh7vUGK7dgnnzSeWB5j4dRM4mgFusB-0-3abd2de63eb4640133db9ecf57ce0066)
如果要加载一个新的页面,需要创建一个小部件。为了方便理解,可以在main.dart所在目录创建一个新的目录,并把它命名为pages,这个名称可以根据需要自定义。pages目录将保存应用中的页面。
在pages目录下创建home.dart文件,在home.dart文件中引入包,创建一个类HomePage继承StatelessWidget,因为这里不需要管理任何状态。下一步添加build()方法,在build()方法中返回main.dart中参数body的值,因为Scaffold中使用了NewsManager小部件,需要引入news_manager.dart文件,news_manager.dart不在目录pages下,所以使用../news_manager.dart引入。代码如下:
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P83_11838.jpg?sign=1739400095-8SqI9rekhmwmIaZvVm7yD8ZS5ZMdmNWY-0-562183f866c2906f41db4e294727bfbc)
在main.dart文件中,需要引入HomePage页面,代码如下:
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P83_11840.jpg?sign=1739400095-eC4GKDyzawX6lRwIKgeKokaXFGIFzXWU-0-ca2b82b8bd0caee95590ad185d2f94c6)
在MaterialApp的参数body后面添加HomePage(),代码如下:
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P83_11841.jpg?sign=1739400095-UUgdEMjmyhHBuHBSysqnnJvPm8ZgpiUL-0-9319e32694dc4276e4cc27efd2159dd0)
保存并运行一下,模拟器显示和之前一样,但是单击列表中的某一条记录能导航到新的页面那就更好了。下一节我们看看怎样实现。