6.4　优化详情页面

在详情页news_detail.dart页面中，优化一下显示的内容。例如居中显示body中的内容，body使用了Column，Column有两个对齐参数分别是mainAxisAlignment和crossAxisAlignment。在列Column中，mainAxisAlignment表示从上到下的对齐方式，即垂直对齐方式；crossAxisAlignment表示从左到右的对齐方式，即水平对齐方式。这里输入mainAxisAlignment把鼠标悬停在上面会有提示，如图6.3所示。

图6.3　mainAxisAlignment的提示

可以设置mainAxisAlignment：MainAxisAlignment.center，保存后，body中的内容就在垂直方向居中显示了，再设置crossAxisAlignment：CrossAxisAlignment.center，保存后发现内容并没有水平居中显示，这是因为Column的宽度只会根据内容的宽度来显示。要解决这个问题，在Text（'资讯详情页'）外面加一个Center小部件即可。

如果在详情页显示图片，可以使用Image.asset（'assets/news1.jpg'）方法添加一张图片，这里使用的是硬编码。如果想让图片显示在顶部，需要去掉mainAxisAlignment这个参数。现在给这些小部件加一些间距，在Text（'资讯详情页'）外面加一个Container小部件，设置padding参数，代码如下：

这样我们就创建好间距了，再给按钮设置颜色，代码如下：

下节我们将学习如何传递数据。