![Flutter实战指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/384/32858384/b_32858384.jpg)
上QQ阅读APP看书,第一时间看更新
6.4 优化详情页面
在详情页news_detail.dart页面中,优化一下显示的内容。例如居中显示body中的内容,body使用了Column,Column有两个对齐参数分别是mainAxisAlignment和crossAxisAlignment。在列Column中,mainAxisAlignment表示从上到下的对齐方式,即垂直对齐方式;crossAxisAlignment表示从左到右的对齐方式,即水平对齐方式。这里输入mainAxisAlignment把鼠标悬停在上面会有提示,如图6.3所示。
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P88_2701.jpg?sign=1738841223-0hBTW0vVkJpKUWOCbAAiO5A9EL40lURw-0-739099d9aa4f7f272f40fc843fb16003)
图6.3 mainAxisAlignment的提示
可以设置mainAxisAlignment:MainAxisAlignment.center,保存后,body中的内容就在垂直方向居中显示了,再设置crossAxisAlignment:CrossAxisAlignment.center,保存后发现内容并没有水平居中显示,这是因为Column的宽度只会根据内容的宽度来显示。要解决这个问题,在Text('资讯详情页')外面加一个Center小部件即可。
如果在详情页显示图片,可以使用Image.asset('assets/news1.jpg')方法添加一张图片,这里使用的是硬编码。如果想让图片显示在顶部,需要去掉mainAxisAlignment这个参数。现在给这些小部件加一些间距,在Text('资讯详情页')外面加一个Container小部件,设置padding参数,代码如下:
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P88_11857.jpg?sign=1738841223-xC13jwUbnfDbjQ8dwh6pImPpP78wvlkQ-0-c1096b39d12e6761b4b1015ee2dd6380)
这样我们就创建好间距了,再给按钮设置颜色,代码如下:
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P89_11859.jpg?sign=1738841223-Nq12covcR4Fuurkaze8flm9lW8FKqkOZ-0-f1a290799f34f6db67eccf2f77d3d720)
下节我们将学习如何传递数据。