
上QQ阅读APP看书,第一时间看更新
6.1 在App中添加多个页面
我们以一个简单的例子开始,首先需要创建多个页面,现在的App中只有一个页面,这个页面通过Scaffold创建,然后在Scaffold中再创建需要显示的所有内容,包括导航栏AppBar、导航栏下面的内容body。代码如下:

如果要加载一个新的页面,需要创建一个小部件。为了方便理解,可以在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引入。代码如下:

在main.dart文件中,需要引入HomePage页面,代码如下:

在MaterialApp的参数body后面添加HomePage(),代码如下:

保存并运行一下,模拟器显示和之前一样,但是单击列表中的某一条记录能导航到新的页面那就更好了。下一节我们看看怎样实现。