3.5　UI调试及视觉帮助工具

在main.dart文件的main（）方法中可以添加更多的变量，例如debugpaintbaselinesenabled=true，添加之前，需要引入调试的包文件，代码如下：

     // Chapter03/03-05/lib/main.dart
     import  'package:flutter/rendering.dart'; //引入调试UI用的包文件

保存并重启应用，可以在模拟器中看到一些黄色和绿色的线，表示文字的基线和文字的位置，如图3.9所示。

main（）方法中还可以添加debugPaintPointersEnabled=ture，保存并重启应用后，我们发现没任何变化，但如果单击模拟器屏幕会突出显示，提示我们哪里有单击事件，这样就可以知道在哪里加监听。也可以在MaterialApp中设置调试变量，例如debugShowMaterialGrid：true。保存并重启应用，模拟器屏幕上显示了很多小的网格，这些网格对UI设计有帮助。以上的调试配置只在开发的过程中使用，它们可以帮助我们精确地计算每个元素之间的位置，因此如果想要找出两个元素的位置是否相同或居中，可以使用这种网格定位的方式检查。

图3.9　UI调试

错误经常发生，这一章我们学习了很多好用的工具来定位并改正错误，不同的错误有不同的调试方法。语法和编码错误IDE会有提示信息，可以把鼠标悬停在红线上查看错误信息。运行时错误通常会显示到屏幕或者控制台上，需要认真阅读这些错误信息。我们还学习了断点和调试器，断点可以帮助我们一步步地分析，同时可以看到返回的变量值。我们通过悬停，debug面板，watch来进行调试，也可以通过打印的方式进行调试。最后我们学习了调试页面上小部件的位置，来解决显示的问题。