- Flutter实战指南
- 李楠
- 327字
- 2021-04-04 00:06:23
6.2 给导航页面添加按钮
在news.dart文件中,找到创建Card的地方,添加一个按钮ButtonBar。ButtonBar允许添加多个按钮并且以很好的方式排列,它有一个children参数。在children的小部件数组中添加一个按钮FlatButton。FlatButton是一个没有背景色的按钮,它有一个child参数,把Text('详情')赋值给它,然后添加一个单击事件,暂时用一个空方法,代码如下:

保存后会看到在Card上有一个详情按钮,如图6.1所示。

图6.1 Card中显示详情按钮
居中显示,可以在ButtonBar配置参数alignment,代码如下所示:

现在单击没有任何反应。我们在pages目录下创建一个新的页面news_detail.dart,引入material包,创建类NewsDetailPage继承StatelessWidget,在buid()方法中返回Scaffold作为一个新的页面。注意NewsDetailPage不是HomePage的一部分,然后给NewsDetailPage页面添加导航栏AppBar,标题显示“详情”,body中可以显示一行居中的文字“资讯详情页”,代码如下:

下一节学习如何导航到这一详情页。